Vue.js 多个复选框

【问题标题】：Vue.js multiple check boxVue.js 多个复选框
【发布时间】：2019-01-14 19:51:24
【问题描述】：

我有 3 个复选框。想要得到像{ceheckboxName1:value,ceheckboxName2:value,ceheckboxName3:value} 这样的结果。您可以查看我的代码以更好地理解。

 <li>
    <input name="" type="checkbox" value="100" v-model="checkedNames"  id="incall">
    <label for="incall">Incall</label>
    <div class="pull-right price-now-right"><p>100</p></div>
</li>
<li>
    <input name="" type="checkbox"  value="200" v-model="checkedNames"   id="">
    <label for="lbl">view</label>
    <div class="pull-right price-now-right"><p>100</p></div>
</li>
<li>
    <input name="" type="checkbox" value="On Request" v-model="checkedNames"  id="overnight">
    <label for="ovr">lmm</label>
    <div class="pull-right price-now-right"><span>On request</span></div>
</li>

【问题讨论】：

你的JS代码在哪里？什么不起作用？

标签： arrays vue.js

【解决方案1】：

给每个复选框一个:value="true"（是的，: 很重要）和v-model="checkboxName1"（2、3 等）。如果选中，这将自动将this.checkboxName1 设置为true。

然后，在您的 data 函数中：

data() {
    return {
        checkboxName1: false,
        checkboxName2: false,
        checkboxName3: false,
    };
}

this.$data 将包含您想要的格式。

【讨论】：