javascript - 来自复选框的Vuejs点击事件？

Question

我在复选框上有一个 v-model，它的值是从一个循环中分配的。我希望点击事件调用一个函数，我需要在其中访问选中的数据。当点击被触发时，如果我记录状态，它不会打印复选框的当前点击数据。它打印先前单击的复选框数据。是否必须在函数中传递事件并访问数据？

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

Js fiddle :http://jsfiddle.net/bmpfs2w2/

Answer 1

使用 @change 而不是 @click。点击事件在值真正改变之前被触发。

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

http://jsfiddle.net/eLzavj5f/