[Vuejs]-How to checked pre selected checkbox in vue

by

0👍

Let’s say that you have the following code:

data: () => ({
   countries: [] // contains ids of countries that should be checked on page load
  allCountries: [] // countries array/objects 
})

Then in your loop:

<v-list-item v-for="c in countries">
    <template v-slot:default="{ active }">
       <v-list-item-action>
           <v-checkbox v-model="allCountries"
              :input-value="active"
               color="primary"
               :value="c.id"
            ></v-checkbox>
         </v-list-item-action>

          <v-list-item-content>
             <v-list-item-title>{{ c.name }}</v-list-item-title>
             </v-list-item-content>
         </template>
       </v-list-item>

Pay attention to

:value="c.id"

As it will result in checkbox being marked or not

Leave a comment