Как проверить, установлен ли v-checkbox в Vue JS?

Question

У меня есть флажок со следующими событиями и реквизитами:

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

Учитывая, что все флажки вводятся с помощью v-for, как я могу проверить, выбран ли флажок, используя метод или смонтированная функция в Vue JS?

Например:

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

Answer 1

вы должны создать такую ​​структуру, чтобы вы знали для каждого идентификатора, отмечен он или нет

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
        }
    }
});

, а в * вы должны установить v-model = "planets .selected "

Answer 2

Для вашего макета простейшие методы:

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

Answer 3

Добавьте ключ planets.selected.

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

И в вашем шаблоне:

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

Аналогично:

Отображать несколько флажков в формате таблицы, используя и в Vuetify?