Vuetify-处理多个复选框

Question

我有多个复选框，我想跟踪选定的值，但由于某种原因，在我取消选中复选框后，它的标签会被删除，然后重新添加为true或false。

如何使用vuetify正确跟踪复选框中的选定值？

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
names: ['John', 'Jacob', 'Jules'],
}
},
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container fluid>
<v-checkbox v-for="(name, index) in names" :key="name" v-model="names[index]" :label="name">
</v-checkbox>
</v-container>
Selected names: {{names}}
</v-app>
</div>

Answer 1

您可以使用一个对象数组，其中包含标签和复选框值的单独字段，如下所示：

new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
names: [
{value: 'John', selected: true},
{value: 'Jacob', selected: false},
{value: 'Jules', selected: true}
],
}
},
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container fluid>
<v-checkbox v-for="(name, index) in names" :key="index" v-model="name.selected" :label="name.value">
</v-checkbox>
</v-container>
Selected names: <pre> {{names}} </pre>
</v-app>
</div>

Answer 2

或者，如果你想保留相同的数组结构，你可以这样做：

new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
names: ['John', 'Jacob', 'Jules'],
selectedNames: []
}
},
methods: {
handleCheckboxClicks(name) {
this.selectedNames.includes(name) ?
this.selectedNames = this.selectedNames.filter(n => n != name) :
this.selectedNames.push(name)
}
}
})

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.8/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<v-app style="margin-bottom: 10rem">
<v-container fluid>
<v-checkbox v-for="(name, index) in names" :key="name" @click="handleCheckboxClicks(name)" :label="name">
</v-checkbox>
</v-container>
Selected names: {{selectedNames}}
</v-app>
</div>

这种方法的问题是它不能处理重复的名称，所以@AnuraSrivastava的答案仍然是更好的方法。