Check box binding in Vue js

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