v-on:click事件怎么改变v-model绑定的值？

Question

表的input[type='checkbox']框全部绑定到了对应数组的active上，点击上面全选的时候怎么让所有的checkbox的active值变为true/false?

这里是我写的全选的代码，但是这样的话是改变整个列表的内容，如果我加入了筛选filterBy,在筛选框输入内容后列表会改变，但是这时再点击全选依然改变的是所有结果的active，而不是当前筛选出来的结果的active

        checkAll:function(){
            if ($('#selectAll').is(':checked')) {
                $("#result tr>td input").prop('checked', true);
                for(var i in goodsDetail.$data.goodsMsg){
                    goodsDetail.$data.goodsMsg[i].active = true;
                }
            } else {
                $("#result tr>td input").prop('checked', false);
                for(var i in goodsDetail.$data.goodsMsg){
                    goodsDetail.$data.goodsMsg[i].active = false;
                }
            }
            var length = $('input:checkbox[name=checkBox]:checked').length;
            $(".centerinfo").text("已选中"+length+"条数据");
        }

Answer 1

为什么你会这么使用vue？你不应该去操作dom而应该去操作数据。你应该去修改数据里的选中状态而不是去手动的修改dom的实际选中状态。

Answer 2

给每个item一个isChecked的布尔值来表示当前选项是否被选中，checkAll去操作数据的这个属性就可以了。

Answer 3

每一行都设置v-bind:class="{'active': isChecked}",全选时再去循环每行的isChecked设置成true

Answer 4

最近的项目需要用到全选，写了一个全选的指令，你可以参考下

export default {
'check-all': {
twoWay: true,
        params: ['checkData'],
        bind() {
/**
             * 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框
             */
            this.vm.$watch(this.params.checkData, (checkData) => {
if (checkData.every((item) => item.checked)) {
this.set(true);
                } else {
this.set(false);
                }
            }, { deep: true });
        },
        update(checkAll) {
/**
             * 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false
             */
            if (checkAll) {
this.vm[this.params.checkData].forEach((item) => {
                    item.checked = true;
                });
            } else {
this.vm[this.params.checkData].forEach((item) => {
                    item.checked = false;
                });
            }
        },
    },
};

调用

<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData">
<ul>
    <li v-for="item in checkData">
        <input type="checkbox" v-model="item.checked">
        {{item.text}}
</li>
</ul>

知乎上也有类似的问题，也有其他解决方案，你可以参考下：
https://www.zhihu.com/questio...