Question

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

点击＆＃34; +＆＃34;在列表的末尾，它将触发对addChild函数的调用，它将成功附加数据。数据被追加，但递归组件不是被动的。

＆＃13;

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
    }
    }
})

＆＃13;

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

＆＃13;

Answer 1

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

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

但是，添加属性完全您在nestInformation方法中正在执行的操作：

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

结果是每个对象的children属性不被动，因此当将此数组推送到addChild时，不会在该对象中触发重新呈现UI。

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

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

我已经分叉并修改了您的fiddle以供参考。

vue.js - 当使用来自原始json的嵌套数组时，递归组件不会更新

1 个答案: