使用 v-for Vuetify v-checkboxes答案

【问题标题】：Vuetify v-checkboxes with v-for使用 v-for Vuetify v-checkboxes
【发布时间】：2022-01-07 06:27:02
【问题描述】：

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

我正在使用 Vuetify。如何在 v-checkboxes 中使用 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>

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

【问题讨论】：

标签： vue.js vuetify.js v-for

【解决方案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>

【讨论】：