复选框中的Vuejs单击事件？

Posted 2023-02-22

【中文标题】复选框中的Vuejs单击事件？

【英文标题】：Vuejs click event from checkbox?

【发布时间】：2018-11-03 11:56:46

【问题描述】：

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

【参考方案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 未定义