Dynamic Value Checkbox Vuejs 2

checkbox, vue.js

Solution

<div id="demo" >
  <ul>
    <li v-for="mainCat in mainCategories">
      <input type="checkbox" :value="mainCat.merchantId" :id="mainCat.merchantId" v-model="checkedCategories" @click="check($event)"> {{mainCat.merchantId}}
    </li>
  </ul>
  {{ checkedCategories }}
</div>

And in your script:

var demo = new Vue({
  el: '#demo',
  data: {
    checkedCategories: [],
    mainCategories: [{
        merchantId: '1'
      }, {
        merchantId: '2'
      }] 
  },
  methods: {
    check: function(e) {
      if (e.target.checked) {
        console.log(e.target.value)
      }
    }
  }
})

Check this: https://v2.vuejs.org/v2/guide/forms.html#Checkbox

Working fiddle: http://jsfiddle.net/yMv7y/9206/

Problem

I can't get the value of the checkbox. ``` <li v-for="mainCat in mainCategories"> <input type="checkbox" :value="mainCat.merchantId" v-model="mainCategories.merchantId" id="mainCat.merchantId" @click="merchantCategoryId"> </li> ``` My Methods: ``` methods: { merchantCategoryId: function() { console.log(this.mainCategories.merchantId) } } ``` When it clicks I only get true and false for uncheck. TY

Original source