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 fiddle：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()内。您可以read about $nextTick，但要旨是

推迟下一个DOM更新周期后执行的回调。更改一些数据以等待DOM更新后，请立即使用它。

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

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

// ...

check (e) {
  this.$nextTick(() => {
    console.log(checkedCategories, e)
  })
}

Vuejs点击复选框中的事件？

2 个答案: