时间戳

首页 > 解决方案 > Vue.js 多个复选框

arrays - Vue.js 多个复选框

问题描述

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

标签： arraysvue.js

解决方案

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

然后，在您的data函数中：

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

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

推荐阅读