来自复选框的Vuejs单击事件? [英] Vuejs click event from checkbox?

问题描述

我在复选框上有一个 v-model，其中的值是从循环中分配的.我希望点击事件调用一个函数，我需要在其中访问已检查数据的数据.当点击被触发时，如果我记录状态，它不会打印复选框的当前点击数据.它打印以前单击的复选框数据.是否必须在函数中传递事件和访问数据?

<ul><li v-for="mainCat in mainCategories"><输入类型=复选框":value=mainCat.merchantId"id=mainCat.merchantId"v-model="checkedCategories";@click="check(checkedCategories)";>{{mainCat.merchantId}}{{ 选中类别 }}

脚本:

var demo = new Vue({el: '#demo',数据: {已检查类别:[]，主要类别:[{商家 ID:'1'}, {商家 ID:'2'}]//使用数据进行测试:[{done:false,content:'testing'}]},方法: {检查:功能(e){console.log(this.checkedCategories,e)}}})

js 小提琴:http://jsfiddle.net/bmpfs2w2/

解决方案

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

http://jsfiddle.net/eLzavj5f/

I have a v-model on checkbox which values are assigned from a loop. I want the click event to invoke a funtion where I need to access the data of the checked ones. When a click is trigerred, If I log the state it doesnot print the current clicked data of the checkbox. It prints previous clicked checkbox data. Should a event must be passed and accessed data in the function?

<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>

script:

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/

解决方案

Use @change instead of @click. Click event is triggered before value is really changed.

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

http://jsfiddle.net/eLzavj5f/

这篇关于来自复选框的Vuejs单击事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！