Javascript 选中/取消选中组Vue.js中的所有复选框

我有一个复选框数组，它已经分为多个组，如果选中了父项，我需要选中所有子复选框，如果父项未选中，则需要取消选中，然后更新数组中的所有状态。因为我是Vue的新手，所以这种方式在我的头上

我设置了一个代码笔，无法更改数组的结构，因为它是来自服务器的JSON响应

Js

Html

点击

{{children.text}

谁能给我点化一下吗。提前感谢

在模板中

<input type="checkbox"
       :disabled="item.state.disabled" 
       :name="item.text" 
       :checked="item.state.selected" 
       @click="item.state.selected = !item.state.selected"
       @change="onChange(item, item.state.selected)">

---

更新。

这很容易做到，你只需要在父项和子项中添加

父项

/

子项

道具，下次在jsfiddle.netI中发布会更好。我已经设置了一个代码笔，我无法更改数组结构。即使你无法更改数组结构，这也非常简单。只需添加一个事件处理程序，比如click，并将事件和索引传递给它

@click='clicked（$event，index）

，然后从该索引中，您可以遍历数组并选中/取消选中字段..同时确保下次使用JSFIDLE，尝试/修改其中的一些内容要比codepen好得多stuff@samayo我发现codepen比jsfiddle好得多。

<div id="clone">
    <button @click="submitForm">click</button>
    <div class="dd">
        <ol class="dd-list">
            <li v-for="(item, index) in items" 
                v-bind:class="[item.state.opened ? 'dd-item open' : 'dd-item']">
                <div class="dd-handle"
                     @click="item.state.opened = !item.state.opened">
                    <input type="checkbox"
                           :disabled="item.state.disabled" 
                           :name="item.text" 
                           :checked="item.state.selected" 
                           @click="item.state.selected = !item.state.selected">
                    <label :for="item.text">{{item.text}}</label>
                </div>

                <ol v-if="item.children.length != 0" class="dd-list">
                    <li v-for="(children, index) in item.children" 
                        :data-id="children.id" class="dd-item">
                        <div class="dd-handle">
                            <input type="checkbox" 
                                   :name="children.text" 
                                   :checked="children.state.selected" 
                                   :disabled="children.state.disabled" 
                                   @click="children.state.selected = !children.state.selected">
                            <label :for="children.text">{{children.text}}</label>
                        </div>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</div>

<input type="checkbox"
       :disabled="item.state.disabled" 
       :name="item.text" 
       :checked="item.state.selected" 
       @click="item.state.selected = !item.state.selected"
       @change="onChange(item, item.state.selected)">

methods : {
    submitForm() {
        console.log(tree);
    },
    onChange(item, state){
        for(let child of item.children){
            child.state.selected = state
        }
    }
}