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