Setting a checkbox as checked with Vue.js

Question

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?

Answer 1

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 :

 <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.

Answer 2

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).

Answer 3

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

Answer 4

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

Answer 5

 <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

Answer 6

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.

Answer 7

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

Answer 8

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;
  }

Answer 9

对于 bootstrap vue，如果 value 为“1”，则 value="1" 和“0” unchecked-value="0"