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

我可以做些什么来初始设置复选框的选中状态？

原文由 Lovelock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要设置复选框的状态，您需要将 v-model 绑定到一个值。如果值是真实的，复选框将被选中。在这种情况下，您正在迭代 modules 并且每个 module 都有一个 checked 属性。

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

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

---

如果您想了解有关 v-model 在这种情况下如何工作的更多信息，请 参阅有关 Form Input Binding 的文档 的链接。

原文由 asemahle 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

这应该可以工作，并且复选框将显示具有当前布尔状态的复选框（如果选中，则未选中）。

原文由 ricardoorellana 发布，翻译遵循 CC BY-SA 3.0 许可协议