设置一个与Vue.js选中的复选框

假设您要将一个prop传递给子组件，并且该prop是一个布尔值，它将确定是否选中了该复选框，那么您必须将boolean值传递给v-bind:checked="booleanValue"或更短的方法:checked="booleanValue"，例如：

<input
    id="checkbox"
    type="checkbox"
    :value="checkboxVal"
    :checked="booleanValue"
    v-on:input="checkboxVal = $event.target.value"
/>

那应该起作用，并且该复选框将显示具有当前布尔状态的复选框（如果为true，则为未选中）。

在v模型中，属性的值可能不是严格的布尔值，并且复选框可能不会“识别”该值为已选中/未选中。VueJS中有一个简洁的功能可以将转换为true或false：

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

要设置复选框的值，您需要将v模型绑定到一个值。如果该值为真，则将选中该复选框。在这种情况下，您要进行迭代，modules并且每个对象module都有一个checked属性。

以下代码将复选框与该属性绑定：

<input type="checkbox" v-model="module.checked" v-bind:id="module.id">

---

注意，我删除了v-bind:value="module.id"。您不应该在同一元素上使用v-model和v-bind:value。从vue 文档：

<input v-model="something">

只是用于以下目的的语法糖：

<input v-bind:value="something" v-on:input="something = $event.target.value">

因此，通过使用v-modeland v-bind:value，您实际上最终拥有v-bind:value 两次，这可能导致未定义的行为。