VueJS从复选框点击事件？

Question

我在复选框上有一个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)
}
}
})

Js小提琴：http：//jsfiddle.net/bmpfs2w2/

Answer 1

使用@change代替@click。在实际更改值之前触发Click事件。

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

http://jsfiddle.net/eLzavj5f/

Answer 2

如果您希望在值更改后this.$nextTick()调用该函数，您可以将处理程序功能包装在. 您可以阅读有关内容$nextTick，但要点是

\n

\n

推迟回调在下一个 DOM 更新周期后执行。在您\xe2\x80\x99更改了一些数据后立即使用它以等待 DOM 更新。

\n

\n

因此，您的处理程序将在 DOM 更新后被调用，也就是在您的状态发生更改并且效果已反映在 DOM 中之后。

\n

<input \n  type="checkbox" \n  :value="mainCat.merchantId"     \n  id="mainCat.merchantId" \n  v-model="checkedCategories" \n  @change="check($event)"\n> \n\n// ...\n\ncheck (e) {\n  this.$nextTick(() => {\n    console.log(checkedCategories, e)\n  })\n}\n

\n