javascript - 使用 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-model 绑定(bind)到一个值。如果值为真，则复选框将被选中。在这种情况下，您正在遍历 modules 并且每个 module 都有一个 checked 属性。

以下代码会将复选框绑定(bind)到该属性:

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

---

如果您想了解更多关于 v-model 在这种情况下如何工作的信息，这里有一个链接 the documentation about Form Input Binding .