checkbox与v-for：解决“只显示框，不显示选择文字”

Posted 2021-07-17 安之ccy

正常我们想要的复选框效果是一个框对应一个描述文字：

<div>
    <input type="checkbox" name="test" value="123">123
    <input type="checkbox" name="test" value="456">456
    <input type="checkbox" name="test" value="789">789
</div>

效果：

问题：
如果v-for直接加在input标签上，如：

<input type="checkbox" name="test" v-for="c in ctType" v-bind:key="c" value="c">{{c}}

相当于只重复展示框，然后渲染变量c，但v-for循环值c无法传递给{{c}}，因此效果是这样的：

解决方案：
可以在input外包裹一层label标签，在label上循环：
ctType：["Vue.js","React.js","Angular.js"]

<label v-for="c in ctType" v-bind:key="c">
    <input type="checkbox" name="ctType" :value="c">{{c}}
</label>

效果：