Vue JS遞歸展平嵌套的父子對象

Question

我正在嘗試展平以下數據，但是顯然我的vue方法中的遞歸函數無法正常工作。 在調試時，我注意到，一旦它進入reduce函數，“ this”變量就會變成其他東西（最初是vue組件）。

{
  "id":1,
  "level":"1",
  "text":"Sammy",
  "type":"Item",
  "children":[
     {
        "id":11,
        "level":"2",
        "text":"Table",
        "type":"Item",
        "children":[
           {
              "id":111,
              "level":"3",
              "text":"Dog",
              "type":"Item",
              "children":null
           },
           {
              "id":112,
              "level":"3",
              "text":"Cat",
              "type":"Item",
              "children":null
           }
        ]
     },
     {
        "id":12,
        "level":"2",
        "text":"Chair",
        "type":"Item",
        "children":[
           {
              "id":121,
              "level":"3",
              "text":"Dog",
              "type":"Item",
              "children":null
           },
           {
              "id":122,
              "level":"3",
              "text":"Cat",
              "type":"Item",
              "children":null
           }
        ]
     }
  ]
 }

理想的結果

 {
   "id":1,
   "level":"1",
   "text":"Sammy",
   "type":"Item",
   "children":[]
 }
 {
   "id":11,
   "level":"2",
   "text":"Table",
   "type":"Item",
   "children":[]
 }
 ...

https://jsfiddle.net/hr8dhy8n/11/這是我的倉庫

 // https://stackoverflow.com/q/47961578/3397771 var data =[ { "id":1, "level":"1", "text":"Sammy", "type":"Item", "children":[ { "id":11, "level":"2", "text":"Table", "type":"Item", "children":[ { "id":111, "level":"3", "text":"Dog", "type":"Item", "children":null }, { "id":112, "level":"3", "text":"Cat", "type":"Item", "children":null } ] }, { "id":12, "level":"2", "text":"Chair", "type":"Item", "children":[ { "id":121, "level":"3", "text":"Dog", "type":"Item", "children":null }, { "id":122, "level":"3", "text":"Cat", "type":"Item", "children":null } ] } ] } ] // define the item component Vue.component('item', { methods: { flattenInformation: function(a, b) { return a.reduce(function (p, c) { !!c.children ? (p.push(c), this.flattenInformation(c.children, p), c.children = []) : p.push(c);return p; }, b); }, getLengthNow (model) { var list = []; list.push(model); var flatten = this.flattenInformation(list,[]); } }, props: ['model'], template: '#item-template' }) // boot up the demo var demo = new Vue({ data: { nestedData: data }, el: '#demo' }); 

 <!-- item template --> <script type="text/x-template" id="item-template"> <template> {{this.getLengthNow(this.model)}} </template> </script> <!-- the demo root element --> <ul id="demo"> <item class="item" :model="nestedData[0]"> </item> </ul> 

Answer 1

使用箭頭的功能，而不是function的關鍵字，讓this從您的Vue公司。 實例范圍。 Function創建它自己的范圍內，您就輸到外部入this :-)

Vue.component('item', {
  methods: {
flattenInformation: (a, b) => {
            return a.reduce((p, c) => {
            !!c.children ? (p.push(c), this.flattenInformation(c.children, p), c.children = []) : p.push(c);return p;
         }, b));
        },
        getLengthNow (model) {
        var list = [];
        list.push(model);
        var flatten = this.flattenInformation(list,[]);

    }
  },
  props: ['model'],
  template: '#item-template'
})