Vue - 全选复选框答案

【问题标题】：Vue - Select all checkboxVue - 全选复选框
【发布时间】：2021-09-09 15:20:45
【问题描述】：

我对 Vue 比较陌生，所以在这方面对我来说很简单。

我有一个 v-for 生成一个复选框列表，如果我要单独单击它们，这些都可以正常工作，我所追求的，就像标题所说的是一个全选复选框，它可以选择所有在列表中，但我遇到了一些我不明白的问题，请参阅下面的相关代码：

new Vue({
    el: "#lister-app",
    mixins: [pagination, baseDownloadParent],
    components: { selectField, articleItem, documentItem },
    data: {
      facets: {},
      isCheckAll: false,
    },
    computed: {
      getFacets() {
        return this.facets;
      },
      getFacetsLength() {
        return this.facets.length;
      },
    },
    methods: {
      toggleSelect(item, facet) {
        if (!this.params[facet.name]) Vue.set(this.params, facet.name, []);
        const existElem = this.params[facet.name].findIndex((el) => {
          return el === item.identifier;
        });

        if (existElem !== -1) this.params[facet.name].splice(existElem, 1);
        else this.params[facet.name].push(item.identifier);
      },
      checkAll(){
        console.log('FunctionWhichChecksAll');
      },
    },
});

 <label class="option-checkbox" for="Select all">
    <input id="Select all" class="option-checkbox__input" type="checkbox" @click='checkAll()' v-model='isCheckAll'>
    <span class="option-checkbox__text">Select all</span>
    <span class="option-checkbox__icon"></span>
</label>
<option-field inline-template v-for="(item, i) in facet.items" :for="item.name" :key="i + item.name">
    <label class="option-checkbox">
        <input :id="item.name" class="option-checkbox__input" type="checkbox" v-model="checked"  @change="toggleSelect(item, facet)">
        <span class="option-checkbox__text">{{item.name}} </span>
        <span class="option-checkbox__icon"></span>
    </label>
</option-field>

我所描绘的是作为 checkAll() 函数内部的一段脚本？

任何帮助将不胜感激，在此先感谢您。

【问题讨论】：

标签： vue.js

【解决方案1】：

这是一个基于您的代码（简化）的工作演示： https://stackblitz.com/edit/vue-prghrq?file=src%2FApp.vue

当您将 v-model 与 @click 处理程序结合使用时，Vue 中的复选框有时会变得一团糟，尤其是当您有一个全选字段时。这就是为什么我通常不使用v-models 的原因。仅将:checked 值用作单向绑定使其更易于阅读和维护。使用click 处理程序，您可以更新每个条目的状态。

【讨论】：