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

我正在构建一个清单应用程序，作为学习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>

<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

将事件发送给其父项，但我不知道如何强制对这些项重新计算childstatus。我不确定这种类型的事件冒泡在这里是否正确，或者计算或监视的属性在这里是否有用。

---

我很好奇您在这里的建议。

也通过道具传递级别名称，您的id可能会有相似的名称冲突，因为它们必须是唯一的才能正常工作。@Helpinghand谢谢！这些代码示例是实际代码的缩小视图，我确实为每个项目使用了级别和唯一id，以便创建唯一id和键。