Setting a checkbox as checked with Vue.js
Javascriptvue.jsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
To set the value of the checkbox, you need to bind the v-model to a value. 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.
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"
. You shouldn't use v-model
and v-bind:value
on the same element. From the vue docs:
> >is just syntactic sugar for: > >
So, by using v-model
and v-bind:value
, you actually end up having v-bind:value
twice, which could lead to undefined behavior.
Solution 2 - Javascript
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:
<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).
Solution 3 - Javascript
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. There is a neat feature in VueJS to make the conversion to true or false:
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
Solution 4 - Javascript
I had similar requirements but I didn't want to use v-model
to have the state in the parent component. 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)"
/>
Solution 5 - Javascript
<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
Solution 6 - Javascript
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:
<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.
Solution 7 - Javascript
I use both hidden and checkbox type input to ensure either 0 or 1 submitted to the form. 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">
Solution 8 - Javascript
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)">
methods: {
updateIsPublic (e) {
this.$store.commit('articles/UPDATE_IS_PUBLIC', e);
},
}
Store
UPDATE_IS_PUBLIC(state, value) {
state.article.is_public = value;
}
Solution 9 - Javascript
for bootstrap vue
if value is a "1" then value="1" and for "0" unchecked-value="0"