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

【问题标题】：Check/Uncheck all checkbox in group Vue.js选中/取消选中 Vue.js 组中的所有复选框
【发布时间】：2017-11-29 14:41:23
【问题描述】：

我有一个复选框数组，它已经分成组，如果选中父项，我需要选中所有子复选框，如果父项未选中，则取消选中，然后更新它们在数组中的所有状态。因为我真的是 Vue 的新手，所以这种方式在我的脑海中挥之不去。

我设置了一个 Codepen here，但我无法更改 Array 的结构，因为它是来自服务器的 JSON 响应。

let tree = [
    {
        "text": "AccountController",
        "id": 1,
        "state": {
            "opened": false,
            "selected": true,
            "disabled": false
        },
        "children": [
            {
                "text": "Index",
                "id": 2,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
            {
                "text": "Login",
                "id": 3,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
      ...
        ]
    },
    {
        "text": "BaseController",
        "id": 19,
        "state": {
            "opened": false,
            "selected": true,
            "disabled": false
        },
        "children": [
            {
                "text": "GetErrorListFromModelState",
                "id": 20,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
            {
                "text": "GetErrorFromModelState",
                "id": 21,
                "state": {
                    "opened": false,
                    "selected": true,
                    "disabled": false
                },
                "children": null
            },
      ...
        ]
    }
]
let app = new Vue({
    el : '#clone',
    data : {
        items : tree,

    },
    methods : {
        submitForm() {
            console.log(tree);
        }
    }
});

HTML

<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>

有人可以请教我。提前致谢！

【问题讨论】：

这很容易做到，你只需要在父子节点上加上parent/child props，下次发在jsfiddle.net上会更好
我已经设置了 Codepen here，但无法更改数组结构。
即使不能改变数组结构也很简单。只需添加一个事件处理程序，如 click 并将一个事件和索引传递给它@click='clicked($event ,index)'，然后您可以从该索引遍历数组并选中/取消选中字段..
还有下次一定要使用jsfiddle，尝试/修改这些东西比codepen好多了
@samayo 我发现 codepen far 比 jsfiddle 更好用。

标签： javascript checkbox vue.js vuejs2

【解决方案1】：

在模板中，

<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
        }
    }
}

更新pen。

【讨论】：