使用 Vue.js 将复选框设置为选中状态

Posted 2023-02-22

【中文标题】使用 Vue.js 将复选框设置为选中状态

【英文标题】：Setting a checkbox as checked with Vue.js

【发布时间】：2017-04-21 10:28:07

【问题描述】：

我一直在谷歌上搜索并使用我知道的每个组合，但我无法将我的复选框初始化为选中状态。

例子：

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

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

【问题讨论】：

form.modules 的值是多少？

【参考方案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。来自vuedocs：

<input v-model="something">

只是语法糖：

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

因此，通过使用v-model 和v-bind:value，您实际上最终会得到v-bind:value 两次，这可能会导致未定义的行为。

【讨论】：

也来自文档：v-bind:true-value="a" v-bind:false-value="b"。在我的情况下，我使用 v-bind:true-value=1 v-bind:false-value=0

答案并不完全正确。 v-model 在不同的输入类型上绑定不同的属性。复选框上的v-model 控制其checked 属性而不是value。有关替代方法，请参阅@ricardoorellana 的答案。

【参考方案2】：

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

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

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

【讨论】：

所以v-model 实际上绑定到checked，而不是value 和<input type=checkbox>？那么在您的代码示例中绑定到值有什么意义呢？

给出的示例考虑到您希望将checkbox 作为子组件，因此您不能仅仅因为您想避免直接改变道具而使用v-model，因为无论何时该值都会被覆盖父组件重新渲染。 v-model创建双向数据绑定，修改子组件中传入的prop

是否可以将:checked 绑定到函数的结果并传递参数？ :checked="method(id)" 之类的东西？

是的，这是有效且可能的@HMR

【参考方案3】：

在 v-model 中，属性的值可能不是严格的布尔值，并且复选框可能无法“识别”为选中/未选中的值。 VueJS 中有一个巧妙的功能可以转换为真或假：

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

【讨论】：

确实不错！谢谢！

Vue 2 中的文档：vuejs.org/v2/guide/forms.html#Checkbox-1 和 Vue 3：v3.vuejs.org/guide/forms.html#checkbox-2

【参考方案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)"
/>

【参考方案5】：

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

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

【参考方案6】：

我遇到了这个问题，几个小时都想不出解决办法，直到我意识到我错误地发生了 prevented 原生事件：

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

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

【参考方案7】：

我同时使用隐藏和复选框类型的输入来确保将 0 或 1 提交到表单。确保字段名称相同，这样只有一个输入会发送到服务器。

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

【参考方案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;