VueJS从复选框点击事件?

vue.js Vue.js

Itachi小宇宙

2020-03-13

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

第1400篇《VueJS从复选框点击事件?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Sam梅小胖 2020.03.13

使用@change代替@click在实际更改值之前触发Click事件。

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

http://jsfiddle.net/eLzavj5f/

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android