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
Then you have the following code to display the category checkboxes. I have use v-for
to iterate the array of category
- {{category}}
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
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
- {{category.name}}
You can see the working demo here