Vue JS递归展平嵌套的父子对象

Question

I am trying to flatten the following data , but apparently my recursive function in vue method is not working properly. While I was debugging I noticed that once It enters the reduce function the 'this' variable change into something else(originally vue component).

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

desired result

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

https://jsfiddle.net/hr8dhy8n/11/ here is my repo.

 // 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

Use arrow functions instead of function keyword, to keep this from your Vue. instance scope. Function creates it's own scope thus you lose access to outer 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'
})