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

【问题标题】：How to check whether a v-checkbox is selected in Vue JS?如何检查Vue JS中是否选中了v-checkbox？
【发布时间】：2020-09-13 09:41:17
【问题描述】：

我有一个包含以下事件和道具的复选框：

   <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() {  
           ????
       },

【问题讨论】：

假设selectedPlanets 是一个数组，您是否只是想检查它包含哪些行星ID？你想用这些值做什么？

标签： javascript vue.js methods v-for

【解决方案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"
   />

类似于：

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

【讨论】：

【解决方案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"

【讨论】：

【解决方案3】：

根据您的布局，最简单的方法是：

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

【讨论】：