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:

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:

---

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.