[英]Setting a checkbox as checked with Vue.js
I have been googling and playing with every combination I know but I cannot get my checkboxes to be initialised as checked.我一直在谷歌搜索和玩我知道的每一个组合,但我无法让我的复选框被初始化为选中状态。
Example:例子:
<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>
An example of the modules data:模块数据示例:
[
{
"id": 1,
"name": "Business",
"checked": true
},
{
"id": 2,
"name": "Business 2",
"checked": false
},
]
What can I do to initially set the checked status of the checkboxes?我可以做些什么来初始设置复选框的选中状态?
To set the value of the checkbox, you need to bind the v-model to a value.要设置复选框的值,您需要将 v-model 绑定到一个值。 The checkbox will be checked if the value is truthy.
如果值是真实的,复选框将被选中。 In this case, you are iterating over
modules
and each module
has a checked
property.在这种情况下,您正在迭代
modules
,并且每个module
都有一个checked
的属性。
The following code will bind the checkbox with that property:以下代码将复选框与该属性绑定:
<input type="checkbox" v-model="module.checked" v-bind:id="module.id">
Notice that I removed v-bind:value="module.id"
.请注意,我删除了
v-bind:value="module.id"
。 You shouldn't use v-model
and v-bind:value
on the same element.你不应该在同一个元素上使用
v-model
和v-bind:value
。 From the vue docs :来自 vue 文档:
<input v-model="something">
is just syntactic sugar for:
只是语法糖:
<input v-bind:value="something" v-on:input="something = $event.target.value">
So, by using v-model
and v-bind:value
, you actually end up having v-bind:value
twice , which could lead to undefined behavior.因此,通过使用
v-model
和v-bind:value
,您实际上最终会得到v-bind:value
两次,这可能会导致未定义的行为。
Let's say you want to pass a prop to a child component and that prop is a boolean that will determine if the checkbox is checked or not, then you have to pass the boolean value to the v-bind:checked="booleanValue"
or the shorter way :checked="booleanValue"
, for example:假设您想将一个道具传递给子组件,并且该道具是一个布尔值,它将确定复选框是否被选中,那么您必须将布尔值传递给
v-bind:checked="booleanValue"
或更短的方法:checked="booleanValue"
,例如:
<input
id="checkbox"
type="checkbox"
:value="checkboxVal"
:checked="booleanValue"
v-on:input="checkboxVal = $event.target.value"
/>
That should work and the checkbox will display the checkbox with it's current boolean state (if true checked, if not unchecked).这应该可以工作,并且复选框将显示具有当前布尔状态的复选框(如果选中,则未选中)。
In the v-model the value of the property might not be a strict boolean value and the checkbox might not 'recognise' the value as checked/unchecked.在 v-model 中,属性的值可能不是严格的布尔值,并且复选框可能不会“识别”该值是选中/未选中。 There is a neat feature in VueJS to make the conversion to true or false:
VueJS 中有一个巧妙的功能可以转换为 true 或 false:
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
I had similar requirements but I didn't want to use v-model
to have the state in the parent component.我有类似的要求,但我不想使用
v-model
在父组件中拥有状态。 Then I got this to work:然后我得到了这个工作:
<input
type="checkbox"
:checked="checked"
@input="checked = $event.target.checked"
/>
To pass down the value from the parent, I made a small change on this and it works.为了从父级传递值,我对此进行了一些小改动,它可以工作。
<input
type="checkbox"
:checked="aPropFrom"
@input="$emit('update:aPropFrom', $event.target.checked)"
/>
<input v-if = "module.checked == true" checked type="checkbox" > <input v-else-if = "module.checked == false" type="checkbox" >
I have solved this with use of v-if and v-else-if我已经使用 v-if 和 v-else-if 解决了这个问题
I experienced this issue and couldn't figure out a fix for a few hours, until I realised I had incorrectly prevented
native events from occurring with:我遇到了这个问题并且在几个小时内无法找到解决方法,直到我意识到我错误地
prevented
本地事件的发生:
<input type="checkbox" @click.prevent="toggleConfirmedStatus(render.uuid)"
:checked="confirmed.indexOf(render.uuid) > -1"
:value="render.uuid"
/>
removing the .prevent
from the @click
handler fixed my issue.从
@click
处理程序中删除.prevent
解决了我的问题。
I use both hidden and checkbox type input to ensure either 0 or 1 submitted to the form.我同时使用隐藏和复选框类型输入来确保将 0 或 1 提交到表单。 Make sure the field name are the same so only one input will be sent to the server.
确保字段名称相同,因此只有一个输入将发送到服务器。
<input type="hidden" :name="fieldName" value="0">
<input type="checkbox" :name="fieldName" value="1" :checked="checked">
In my case I had an simple boolean type, so What I did is:就我而言,我有一个简单的布尔类型,所以我所做的是:
in my html: <input type="checkbox" :checked="article.is_public" :value="article.is_public" @change="updateIsPublic($event.target.checked)">
在我的 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);
},
}
Store店铺
UPDATE_IS_PUBLIC(state, value) {
state.article.is_public = value;
}
对于 bootstrap vue,如果 value 为“1”,则 value="1" 和“0” unchecked-value="0"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.