将非空变量分配给 v-model 时复选框自动选中所有答案

【问题标题】：Checkbox automatically checked all when assigned non-empty variable to v-model将非空变量分配给 v-model 时复选框自动选中所有
【发布时间】：2019-11-10 00:49:08
【问题描述】：

下面是我的表单代码，用于更新用户之前提交的数据。

<div class="myLabel">Repeat on: </div> {{ data.repeatOn }}
<div class="myInput">
   <input type="checkbox" id="1" value="1" v-model="data.repeatOn" :checked="data.repeatOn.includes('1')"><label for="1">Monday</label>&nbsp;&nbsp;
   <input type="checkbox" id="2" value="2" v-model="data.repeatOn" :checked="data.repeatOn.includes('2')"><label for="2">Tuesday</label>&nbsp;&nbsp;
   <input type="checkbox" id="3" value="3" v-model="data.repeatOn" :checked="data.repeatOn.includes('3')"><label for="3">Wednesday</label>&nbsp;&nbsp;
   <input type="checkbox" id="4" value="4" v-model="data.repeatOn" :checked="data.repeatOn.includes('4')"><label for="4">Thursday</label><br/>
   <input type="checkbox" id="5" value="5" v-model="data.repeatOn" :checked="data.repeatOn.includes('5')"><label for="5">Friday</label>&nbsp;&nbsp;
   <input type="checkbox" id="6" value="6" v-model="data.repeatOn" :checked="data.repeatOn.includes('6')"><label for="6">Saturday</label>&nbsp;&nbsp;
   <input type="checkbox" id="7" value="7" v-model="data.repeatOn" :checked="data.repeatOn.includes('7')"><label for="7">Sunday</label>&nbsp;&nbsp;
</div>

data.repeatON 包含先前选中的复选框值。执行{{ data.repeatOn }} 将显示类似1,2 的值

问题是上面的代码总是会选中所有复选框。如何使其仅选中存储在 data.value 中的复选框值？

【问题讨论】：

标签： vue.js

【解决方案1】：

您的data.repeatOn 应在 HTML 中使用唯一名称定义，例如

<input type="checkbox" id="1" value="1" v-model="data.repeatOn[1]" :checked="data.repeatOn.includes('1')"><label for="1">Monday</label>&nbsp;&nbsp;
<input type="checkbox" id="2" value="2" v-model="data.repeatOn[2]" :checked="data.repeatOn.includes('2')"><label for="2">Tuesday</label>&nbsp;&nbsp;
//... data.repeatOn[n]

和数据

data() {
  return {
    data : {
      repeatOn : []
   }
  }
},

【讨论】：

感谢您的回复，但经过进一步检查，我发现问题是因为我的 data.repeatOn 是字符串。然后我使用 split 将其转换为数组并将 v-model 保留为 v-model="data.repeatOn 并且它可以工作。如果我如上所述将 v-model 设置为 v-model="data.repeatOn[1]" 等等，它就不起作用了。