Vuetify复选框阵列在列表更改时选中所有复选框

Question

我对vue和vuetify都很陌生，所以我的代码中可能有一些可怕的行，但我真的很难处理这一行，如果能提供一些帮助就好了。

我有一个复选框数组，它是用"items"数组上的v-for循环生成的。这个复选框数组被附加到一个模型数组上，就像vuetify文档中的这个例子一样。

它看起来像下面的代码。

问题是：如果我更改items数组，即使模型数组仍然为空，所有复选框都会被选中。

这是我的模板：

<div id="app">
<v-app>
<v-content>
<v-container>
<div>
<v-list>
<v-list-item 
v-for="item in items" :key="item.id"
>
<v-checkbox 
v-model="model" :label="item.name"  
:value="item" 
:value-comparator="comparator"
></v-checkbox>
</v-list-item>
</v-list>
<v-btn @click="updateItems">Change elements</v-btn>
</div>
</v-container>
</v-content>
</v-app>
</div>

和脚本

new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
model: [],
items: [
{
id: 1,
name: "Item1"
},
{
id: 2,
name: "Item2"
},
{
id: 3,
name: "Item3"
},
{
id: 4,
name: "Item4"
}
]
};
},
methods: {
comparator(a, b) {
return a.id == b.id;
},
updateItems() {
this.items = [
{
id: 1,
name: "Element1"
},
{
id: 2,
name: "Element2"
},
{
id: 3,
name: "Element3"
},
{
id: 4,
name: "Element4"
}
]
}
}
});

代码笔更容易理解

我已经在这个问题上挣扎了一段时间，如果你有任何想法，欢迎你。非常感谢。

编辑：我在代码中犯了一个错误。修正了。不过问题还是一样。

Answer 1

这段代码中有一些错误，

从下面的复选框

<v-checkbox 
v-model="model" :label="item.name"  
:value="item" 
:value-comparator="comparator"
></v-checkbox>

：当您点击复选框时，值比较器会触发，它会尝试与所有其他值匹配，并且仅对所选id 返回true

"comparator"功能在您的方法中不可用，将"valueCompare">方法替换为"comparater">

当你点击change元素时，它会重置items数组，但你没有重置模型

工作代码笔：https://codepen.io/chansv/pen/rNNyBgQ

添加了修复程序，最终代码看起来像这个

<div id="app">
<v-app>
<v-content>
<v-container>
<div>
<v-list>
<v-list-item 
v-for="item in items"                            :key="item.id"
>
<v-checkbox v-model="model"              :label="item.name"  
:value="item" 
:value-comparator="comparator"
></v-checkbox>
</v-list-item>
</v-list>
<v-btn @click="updateItems">Change elements</v-btn>
</div>
</v-container>
</v-content>
</v-app>
</div>
// Looking for the v1.5 template?
// https://codepen.io/johnjleider/pen/GVoaNe
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
model: [],
items: [
{
id: 1,
name: "Item1"
},
{
id: 2,
name: "Item2"
},
{
id: 3,
name: "Item3"
},
{
id: 4,
name: "Item4"
}
]
};
},
methods: {
comparator(a, b) {
console.log(a, b);
return a.id == b.id;
},
updateItems() {
this.model = [];
this.items = [
{
id: 1,
name: "Element1"
},
{
id: 2,
name: "Element2"
},
{
id: 3,
name: "Element3"
},
{
id: 4,
name: "Element4"
}
]
}
}
});