In this lesson we will see how to bind check box in Vue when you build interface. We will see how to create product category and bind them to check boxes. Also we will see how to set the default category.
First we will create the category array inside the data segment of the Vue instance
I have following code to define the categories data property in Vue instance
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var vm= new Vue({ el: "#root", data: { categories:["Fruits","Meat","Snacks"] }, }) </script> |
Then you have the following code to display the category checkboxes. I have use v-for to iterate the array of category
|
1 2 3 4 5 6 7 |
<div id='root'> <ul> <li v-for="category in categories"> <input type="checkbox" :value='category'> {{category}} </li> </ul> </div> |
You can see the demo
If you need to set checked property as the default value you can have the following code
I will change the categories array with objects
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var vm= new Vue({ el: "#root", data: { categories:[ {"name":"Fruits","checked":false }, {"name":"Meat","checked":true }, {"name":"Snacks","checked":false } ] }, }) |
So now this category will have Boolean checked property
Your HTML code should be changed as following
|
1 2 3 4 5 6 7 |
<div id='root'> <ul> <li v-for="category in categories"> <input type="checkbox" :value='category.name' v-model="category.checked"> {{category.name}} </li> </ul> </div> |
You can see the working demo here