Vue.js多个复选框

Question

我有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>

Answer 1

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

然后，在您的data函数中：

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

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