Question

我正在构建清单应用程序作为学习Vue的一种方式。

我有一个没有定义最大深度的嵌套对象，并且我想在所有项目上显示一个状态，该状态基于是否检查了项目本身，是否检查了（某些）子项目（是否存在）是任何。）

我希望在对象中没有任何附加属性的情况下发生这种情况，因为这些项目将是可拖动的，并且我希望它在某些项目移动后自动更新状态。

这是我的数据

[{
   name: "item 1",
   checked: 0,
   items: [
       {
           name: "subitem 1",
           checked: 0,
           items: [ 
               //etc...
           ]
       },
       {
           name: "subitem 2",
           checked: 0,
           items: [
               //etc...
           ]
       }
   ]
}]

该应用程序如下所示：

<div id="app">
    <checkin-list :checklist="items"></checkin-list>
</div>

checkin-list组件模板如下：

<li v-for="item in checklist">                    
    <div :status="childstatus(item)">
        <input type="checkbox" :id="'check_' + index" v-model="item.checked">
        <label :for="'check_' + index">{{ item.name }}</label>
    </div>

    <checkin-list :checklist="item.items"></checkin-list>
</li>

childstatus函数接受一个项目并循环遍历其所有子项，以检查是否选中了部分或全部项目。

当我检查第4级的项目时，它只会更新第3级和第4级；它不会一直冒泡到顶部。我已尝试将事件$emit告知其家长，但我不知道如何强制对这些项目重新计算儿童状况。我不确定这种类型的事件冒泡在这里是否正确，或者在这里计算或监视属性是否会有所帮助。我很好奇您在这里的建议。

基于嵌套属性的Vue.js设置属性

0 个答案: