如何检查Vue JS中是否选中了v-checkbox？

Question

I have a checkbox with the following events and props:

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

Given that all of the checkboxes are brought in using a v-for, how can I check whether a checkbox is selected using a method or mounted function in Vue JS?

For example:

    methods: {
       checkSelected() {  
           ????
       },

Answer 1

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?

Answer 2

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"

Answer 3

Given your layout the simplest methods is:

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