使用v-for对v-复选框进行Vuetify

Question

我正在尝试使用v-for来显示backLogoLists数组中的所有复选框。

我正在使用Vuetify。如何在v复选框中使用v-for？当我取消选中例如logo2:
Error in v-on handler: "TypeError: Cannot use 'in' operator to search for 'undefined' in logo2"时，我一直收到这个错误

<v-row>
<v-col cols="6" v-for="backLogoList in backLogoLists" :key="backLogoList">
<v-checkbox v-model="backLogoList[key]" :label="backLogoList" :value="backLogoList"></v-checkbox>
</v-col>
</v-row>
<script>
export default {    
data: () => ({
backLogoLists: ['logo1', 'logo2', 'logo3'],
}),
};
</script>

非常感谢您的帮助。提前感谢！

Answer 1

v-model指的是将处理复选框值的属性。必须使用元素的唯一属性作为键，而不是基元对象。在这个例子中，我使用"文本"：

<template>
<v-row>
<v-col cols="6" v-for="backLogoList in backLogoLists" :key="backLogoList.text">
<v-checkbox :v-model="backLogoList.selected" :value="backLogoList.text" :label="backLogoList.text"></v-checkbox>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
backLogoLists: [{selected:0,text:'logo1'}, {selected:0,text:'logo2'}, {selected:0,text:'logo3'}],
//backLogoLists: ['logo1', 'logo2', 'logo3'],
}),
};
</script>