80

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?

Improve this question
1
  • 1
    wich is the value of form.modules? Commented Dec 6, 2016 at 17:28

9 Answers 9

Reset to default
90

To set the state 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 to that property:

<input type="checkbox" v-model="module.checked" v-bind:id="module.id">

If you'd like to know more about how v-model works in this situation, here's a link to the documentation about Form Input Binding.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Also from the docs : v-bind:true-value="a" v-bind:false-value="b". In my case I used v-bind:true-value=1 v-bind:false-value=0
The answer is not really correct. v-model binds different attributes on different input types. v-model on checkboxes controls their checked attribute instead of value. See @ricardoorellana's answer for an alternate approach.
This You shouldn't use v-model and v-bind:value on the same element it not true for checkboxes. Im correctly using <input type="checkbox" v-for="item in items" v-model="selectedIDs" v-bind:value="item.id"> where selectedIDs is array of IDs of checked checkboxes. So value MUST BE used. How would Vue know what value to add to array without v-bind:value?
You are right. I've edited the answer to remove the incorrect information.
52

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

Improve this answer

4 Comments

so v-model actually binds to checked, not to value with <input type=checkbox>? What the point of also binding to value in your code example then?
The example given consider that you want to have your checkbox as a child component, so you cannot use v-model simply because you want to avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. v-model creates a two-way data bindings and modifies the passed prop in the child component
Is it possible to bind :checked to the result of a function and passing it arguments? Something like :checked="method(id)"?
Yes, that's valid and possible @HMR
43

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"
>
Improve this answer

3 Comments

Documentation for this in Vue 2: vuejs.org/v2/guide/forms.html#Checkbox-1 and in Vue 3: v3.vuejs.org/guide/forms.html#checkbox-2
Having tried the accepted answer, this is the only solution that worked for me. I am using vue 3.3.4
Great @joos thank you !
26

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)"
/>
Improve this answer

Comments

4

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.

Improve this answer

Comments

0

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">
Improve this answer

Comments

0

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;
  }
Improve this answer

Comments

0

for bootstrap vue if value is a "1" then value="1" and for "0" unchecked-value="0"

Improve this answer

2 Comments

<b-form-checkbox size="sm" v-model="row.item.active" value="1" unchecked-value="0" name="check-button" switch></b-form-checkbox>
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
-1 

<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

Improve this answer

1 Comment

This will cause a variety of problems when it comes to form validation, accessibility and such. Not recommended at all. Please look at other answers.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.