[Vuejs]-How to check whether a v-checkbox is selected in Vue JS?

0👍

Add a planets.selected key.

 allPlanets: [
      { name: 'Planet name', value: 'Planet value' , selected : false },
       ...,
       ...
      ],
    }

And in your template:

  <v-checkbox
          v-for="planets in allPlanets" :key="`planets_${planets.id}`"
          :label="planets.name"
          :value="planets.id"
          v-model="planets.selected"
   />

Similar to:

Display multiple checkbox in table format using <v-for> and <v-checkbox> in Vuetify?

0👍

you have to make such a structure, so you know for each id, whether it is checked or not

new Vue({
    data: () => ({
        allPlanets: [
            {
                id: 32,
                name: "planent",
                selected: false
            },
            {
                id: 365,
                name: "planet 2",
                selected: false
            }
        ],
    }),
    methods: {
        checkSelectedByIndex(index) {
            return this.allPlanets[index].selected
        },
        checkSelectedById(id) {
            return this.allPlanets.find(p => p.id === id)?.selected ?? false
        }
    }
});

and in the you have to set the v-model=”planets.selected”

0👍

Given your layout the simplest methods is:

methods: {
   checkSelected(id) {
       return this.selectedPlanets.includes(id)
   },
}

Leave a comment