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

JavaScript

神无樱

2020-03-12

我一直在使用谷歌搜索和了解我所知道的每种组合，但是我无法将我的复选框初始化为已选中状态。

例：

<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
    },
]

我如何做才能初始设置复选框的选中状态？

第1099篇《设置一个与Vue.js选中的复选框》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小哥TonyEva 2020.03.12

假设您要将一个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，则为未选中）。

Mandy村村 2020.03.12

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

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

要设置复选框的值，您需要将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 两次，这可能导致未定义的行为。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android