vue js以递归方式展平嵌套的父子对象

Question

我试图压缩以下数据，但显然我在vue方法中的递归函数无法正常工作。在我进行调试时，我注意到一旦它进入reduce函数，'this'变量就变成了其他东西（最初为vue组件）。

=ArrayFormula(COUNTIF(A1:A6,A1:A6))

期望的结果

{
  "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
           }
        ]
     }
  ]
 }

https://jsfiddle.net/hr8dhy8n/11/这是我的回购。

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

// 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'
});

Answer 1

使用箭头功能代替function关键字，以保持您的Vue this。实例范围。 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'
})