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

Posted 2023-02-22

【中文标题】vue.js - 使用原始 json 中的嵌套数组时，递归组件不会更新

【英文标题】：vue.js - recursive components doesn't get updated when using nested array from raw 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。

我已经阅读并尝试过了。

【参考方案1】：

Abdullah Khanlinked 在上面的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 以供参考。