如何檢查Vue JS中是否選中了v-checkbox？

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 中安裝了 function？

例如：

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

Answer 1

添加一個 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中使用<v-for>和<v-checkbox>以表格格式顯示多個復選框？

Answer 2

你必須做出這樣的結構，所以你知道每個id，是否被檢查

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 3

鑒於您的布局，最簡單的方法是：

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