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绑定到一个值。如果值为真，则将选中该复选框。在这种情况下，您正在迭代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 docs：

<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

假设您想要将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 3

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

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

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)"
/>

Answer 5

<input v-if = "module.checked == true" checked type="checkbox" >
<input v-else-if = "module.checked == false"  type="checkbox" >

我已经使用 v-if 和 v-else-if 解决了这个问题

Answer 6

我同时使用隐藏和复选框类型输入，以确保将0或1提交给表单。确保字段名称相同，以便仅将一个输入发送到服务器。

<input type="hidden" :name="fieldName" value="0">
<input type="checkbox" :name="fieldName" value="1" :checked="checked">

Answer 7

我遇到了这个问题，并在几个小时内找不到解决办法，直到我意识到我错误地发生了 prevented 本机事件：

<input type="checkbox" @click.prevent="toggleConfirmedStatus(render.uuid)"
    :checked="confirmed.indexOf(render.uuid) > -1"
    :value="render.uuid"
/>

从 .prevent 处理程序中删除 @click 解决了我的问题。

Answer 8

就我而言，我有一个简单的布尔类型，所以我所做的是：

在我的 html 中： <input type="checkbox" :checked="article.is_public" :value="article.is_public" @change="updateIsPublic($event.target.checked)">

methods: {
  updateIsPublic (e) {
      this.$store.commit('articles/UPDATE_IS_PUBLIC', e);
    },
}

商店

 UPDATE_IS_PUBLIC(state, value) {
    state.article.is_public = value;
  }

使用Vue.js设置复选框

8 个答案: