Vue.js Quick Example

HTML

<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo" >
  <ul>
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.merchantId" id="mainCat.merchantId" v-model="checkedCategories" @change="check($event)"> {{mainCat.merchantId}}

    </li>
  </ul>
  {{ checkedCategories }}
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
}

li.done {
  text-decoration: line-through;
}

[v-cloak] {
  display: none;
}

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
        merchantId: '1'
      }, {
        merchantId: '2'
      }] //testing with data use: [{done:false,content:'testing'}]
  },
  methods: {
    check: function(e) {
		console.log(this.checkedCategories)
    }
  }
})