Javascript Vuejs是否选中“从中单击事件”复选框？

我有一个v-model on复选框，其中的值是从循环中分配的。 我希望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>

---

Js fiddle:

使用

@change

而不是

@单击
。单击事件在值真正更改之前触发

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



如果希望在值更改后调用函数，可以将处理程序功能包装在
中。$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)
  })
}


// ...
支票（e）{
这个.$nextTick（（）=>{
console.log（checkedCategories，e）
})
}
“点击事件是在值真正改变之前触发的。”我花了半天时间试图弄清楚为什么我的事件能够正确反映。这救了我，谢谢！如果无法使用boostrap vue捕获正确的事件，请将b-form-checkbox组件替换为普通代码。感谢您提供的示例！有趣的发现是，事件处理程序中的param值反映了当前的选中/未选中状态，而v-model绑定属性显示的是以前的状态。答案完美！
<input 
  type="checkbox" 
  :value="mainCat.merchantId"     
  id="mainCat.merchantId" 
  v-model="checkedCategories" 
  @change="check"
> 

// ...

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