vue.js-从原始json使用嵌套数组时，递归组件不会更新 [英] vue.js - recursive components doesn't get updated when using nested array from raw json

问题描述

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

I am trying to create a tree with an add function using computed data. I used the tree-view example in vuejs official homepage and combined it with the computed function that I created but found no luck in implementing it. I've been trying to solve this for 4 days already and still no luck so I am here looking for help.

当您单击列表末尾的"+"时，将触发对addChild函数的调用，并将成功附加数据.数据被追加，但递归组件没有反应.

When you click the "+" in the end of the list it will trigger a call to the addChild function and it will successfully append the data. The data gets appended but the recursive component is not reactive.

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>

推荐答案

Abdullah Khan 链接到

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

但是，属性添加恰好是 您在nestInformation方法中所做的事情:

However, property addition is exactly what you are doing in your nestInformation method:

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

结果是每个对象的children属性是不是无反应的，因此当将此数组推入addChild中时，UI中不会触发任何重新渲染.

The result is that the children property of each object is not reactive, so when this Array is pushed to in addChild, no re-render is triggered in the UI.

解决方案是使用 Vue.set 在创建children数组时使它们具有反应性. nestInformation方法中的相关代码必须更新为以下内容:

The solution will be to use Vue.set when creating the children Arrays so that they will be reactive properties. The relevant code in the nestInformation method must be updated to the following:

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

我已经分叉并修改了您的小提琴供参考.

I have forked and modified your fiddle for reference.

这篇关于vue.js-从原始json使用嵌套数组时，递归组件不会更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！