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

例子:

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

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

推荐答案

要设置复选框的值,需要将v模型绑定到一个值.如果该值为真值,将选中该复选框.在本例中,迭代modules次,每个module都有一个checked属性.

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

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

注意,我删除了v-bind:value="module.id".不能在同一个元素上使用v-modelv-bind:value.来自vue docs:

<input v-model="something">

只是语法糖:

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

所以,通过使用v-modelv-bind:value,你实际上得到了v-bind:valuetwice,这可能会导致未定义的行为.

Vue.js相关问答推荐

如何配置nuxt 3,以便当我直接打开用nPM run generate生成的静态页面时,它可以正常工作?

Vue3组合-如何在组件卸载时注销回调

如何将 cogo toast PRIVE集成到nuxt3中?

在 v-for 中定义变量有什么问题吗?

Vue:将点击事件绑定到动态插入的内容

Vuetify 置顶工具栏

使用 Vue Js 运行 Jest 测试时出现语法错误:无法在模块外使用 import 语句

判断 vue-router.beforeEach 不限制对路由的访问

为什么 vue 中的 @mouseover 操作不起作用

将自定义部分添加到 v-autocomplete 下拉列表

导入没有 .vue 扩展名的 *.vue 文件时出现以下错误?

怎样1秒后自动隐藏VueJS中的元素

错误:vue-loader 要求 @vue/compiler-sfc 存在于依赖树中

NUXT如何将数据从页面传递到布局

基于条件的VueJS HTML元素类型

v-if inside v-for - 在两列中显示项目列表

Vue组件未在laravel 5.3中使用Passport 显示

Vue cli 在 css 中构建生产更改不透明度

Vue.js 中的 CSS 框架

Vue.JS 2.0 修改不相关数据时速度慢