vue.js - 使用原始 json 中的嵌套数组时，递归组件不会更新答案

【问题标题】：vue.js - recursive components doesn't get updated when using nested array from raw jsonvue.js - 使用原始 json 中的嵌套数组时，递归组件不会更新
【发布时间】：2018-06-06 07:00:56
【问题描述】：

我正在尝试使用计算数据创建具有添加功能的树。我使用了 vuejs 官方主页中的树视图示例，并将其与我创建的计算函数相结合，但发现没有实现它。我已经尝试解决这个问题 4 天了，但仍然没有运气，所以我在这里寻求帮助。

当您单击列表末尾的“+”时，将触发对addChild 函数的调用，并成功追加数据。数据被追加，但递归组件不是反应式的。

https://jsfiddle.net/znedj1ao/9/

var data2 = [{
    "id": 1,
    "name":"games",
    "parentid": null
  },
  {
    "id": 2,
    "name": "movies",
    "parentid": null
  },
  {
  	"name": "iron-man",
    "id": 3,
    "parentid": 2
  },
  {
    "id": 4,
    "name": "iron-woman",
    "parentid": 3
  }
]

// define the item component
Vue.component('item', {
  template: '#item-template',
  props: {
    model: Object
  },
  data: function () {
    return {
      open: false
    }
  },
  computed: {
    isFolder: function () {
      return this.model.children &&
        this.model.children.length
    }
  },
  methods: {
    toggle: function () {
      if (this.isFolder) {
        this.open = !this.open
      }
    },
    changeType: function () {
      if (!this.isFolder) {
        Vue.set(this.model, 'children', [])
        this.addChild()
        this.open = true
      }
    },
    addChild: function () {
       this.model.children.push({
        name: 'My Tres',
 				children: [
    			{ name: 'hello' },
    			{ name: 'wat' }
        ]
      })

    }
  }
})

// boot up the demo
var demo = new Vue({
  el: '#demo',
  data: {
    treeData2: data2
  },
  computed: {
   nestedInformation: function () {     
            var a= this.nestInformation(data2);
            return a;
        }
  
  },
  methods:
    {
        nestInformation: function(arr, parent){  
           var out = []
    for(var i in arr) {
        if(arr[i].parentid == parent) {
            var children = this.nestInformation(arr, arr[i].id)

            if(children.length) {
                arr[i].children = children
            }
            out.push(arr[i])
        }
    }
    return out
    }
    }
})

<!-- item template -->
<script type="text/x-template" id="item-template">
  <li>
    <div
      :class="{bold: isFolder}"
      @click="toggle"
      @dblclick="changeType">
      {{model.name}}
      <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
    </div>
    <ul v-show="open" v-if="isFolder">
      <item
        class="item"
        v-for="model in model.children"
        :model="model">
      </item>
      <li class="add" @click="addChild">+</li>
    </ul>
  </li>
</script>

<p>(You can double click on an item to turn it into a folder.)</p>

<!-- the demo root element -->
<ul id="demo">
  <item
    class="item"
    :model="nestedInformation[1]">
  </item>
</ul>

【问题讨论】：

我不是 Vue 专家，但我猜使用 push 向数组添加元素不会使添加的属性具有反应性。你可能想试试$set 或Vue.set()。但我真的不确定。
我已经试过了，它不起作用。它应该可以工作，你可以在这里查看jsfiddle.net/3p0j5sgy/1368，唯一的区别是我传递的数据已经在父子结构中。
我的问题是我的数据是原始的，在传递之前我需要先将其转换为树结构。
您可能还想阅读this。
我已经阅读并尝试过了。

标签： javascript json recursion vue.js

【解决方案1】：

Abdullah Khan linked 在上面的comment 中的 Vue.js 文档说：

同样由于现代 JavaScript 的限制，Vue 无法检测属性添加或删除。

但是，属性添加正是您在 nestInformation 方法中所做的：

if(children.length) {
    arr[i].children = children
}

结果是每个对象的children属性是不响应的，所以当这个Array被推到addChild时，UI中不会触发重新渲染。 p>

解决方案是在创建children 数组时使用Vue.set，以便它们成为反应属性。 nestInformation方法中的相关代码必须更新为如下：

if (children.length) {
    Vue.set(arr[i], 'children', children);
}

我已经 fork 和修改了你的fiddle 以供参考。

【讨论】：