Vue -全选复选框

Question

我对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()函数?

任何帮助都将是感激的，提前谢谢你。

Answer 1

下面是基于您的代码(简化)的工作演示:https://stackblitz.com/edit/vue-prghrq?file=src%2FApp.vue

Vue中的复选框有时会很混乱，当您将v-model与@click处理程序组合在一起时，特别是如果您有一个check-all字段。这就是为什么我通常不使用v-models。仅使用:checked值作为单向绑定使其更易于阅读和维护。使用click处理程序，您可以更新每个条目的状态。