[Vuejs]-Vuetify v-checkboxes with v-for

by

0👍

v-model refers to the property that will handle the value of the checkbox. You must use a unique property of the element as the key, not the primitive object. In this example I use ‘text’:

<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>

Leave a comment