vue.js - VueJS从复选框点击事件？

我在复选框上有一个v模型，其值是从循环分配的。
我希望click事件在需要访问已检查数据的地方调用一个函数。触发单击后，如果我记录状态，则不会打印复选框的当前单击数据。打印先前单击的复选框数据。是否应该在函数中传递事件并访问数据？

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

脚本:

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

小提琴:http://jsfiddle.net/bmpfs2w2/

最佳答案

使用@change而不是@click。在实际更改值之前触发Click事件。

<input type="checkbox"
       :value="mainCat.merchantId"
       id="mainCat.merchantId"
       v-model="checkedCategories"
       @change="check($event)">

http://jsfiddle.net/eLzavj5f/