使用Vue.js设置复选框

Question

我一直在谷歌搜索和玩我知道的每一个组合,但我不能让我的复选框初始化为已检查.

例:

<ul class="object administrator-checkbox-list">
    <li v-for="module in modules">
        <label v-bind:for="module.id">
            <input type="checkbox" v-model="form.modules" v-bind:value="module.id" v-bind:id="module.id">
            <span>@{{ module.name }}</span>
        </label>
    </li>
</ul>

模块数据的示例:

[
    {
        "id": 1,
        "name": "Business",
        "checked": true
    },
    {
        "id": 2,
        "name": "Business 2",
        "checked": false
    },
]

如何初始设置复选框的选中状态？

Answer 1

要设置复选框的值,需要将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-model和v-bind:value,您实际上最终会有v-bind:value 两次,这可能导致未定义的行为.

Answer 2

在 v-model 中，属性的值可能不是严格的布尔值，并且复选框可能无法“识别”选中/未选中的值。VueJS 中有一个巧妙的功能可以转换为真或假：

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

Answer 3

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

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

这应该工作,复选框将显示复选框,其中包含当前的布尔状态(如果未选中则为true,如果未选中).

Answer 4

我有类似的要求，但我不想v-model在父组件中使用状态。然后我得到了这个工作：

<input
  type="checkbox"
  :checked="checked"
  @input="checked = $event.target.checked"
/>

为了传递来自父级的值，我对此做了一个小改动并且它起作用了。

<input
  type="checkbox"
  :checked="aPropFrom"
  @input="$emit('update:aPropFrom', $event.target.checked)"
/>