动态值复选框Vuejs 2

Question

我无法获得复选框的值.

<li v-for="mainCat in mainCategories">
  <input type="checkbox" :value="mainCat.merchantId" v-model="mainCategories.merchantId" id="mainCat.merchantId" @click="merchantCategoryId">
</li>

我的方法:

methods: {    
  merchantCategoryId: function() {
    console.log(this.mainCategories.merchantId)
  }
}

当它点击时我只得到true而false用于取消选中.TY

Answer 1

<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>

在你的脚本中:

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)
      }
    }
  }
})

请查看:https://vuejs.org/v2/guide/forms.html#Checkbox

工作小提琴:http://jsfiddle.net/yMv7y/9206/