复选框中的Vuejs单击事件？答案

【问题标题】：Vuejs click event from checkbox?复选框中的Vuejs单击事件？
【发布时间】：2023-03-13 03:39:01
【问题描述】：

我在复选框上有一个 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小提琴：http://jsfiddle.net/bmpfs2w2/

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

http://jsfiddle.net/eLzavj5f/

【讨论】：

"在值真正改变之前触发点击事件。"我只花了半天的时间试图弄清楚为什么我的事件反映得很好。这救了我。
谢谢！谁能用 boostrap-vue 捕捉不到正确的事件，只需将 b-form-checkbox 组件替换为纯代码即可。
谢谢你的例子！有趣的发现是事件处理程序中的参数值反映了当前的选中/未选中状态，而 v-model 绑定属性显示的是以前的状态。
完美答案！
这里有一个警告 - 在实际更改值之前调用@change。如果您没有传递 $event，那么您调用的任何函数仍将具有旧值。

【解决方案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)
  })
}

【讨论】：

e 未定义