使用 Vue.js 获取所有选中复选框的列表 [英] Get the list of all selected check boxes with Vue.js
本文介绍了使用 Vue.js 获取所有选中复选框的列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何获取我使用 Vue 选择的所有复选框的列表?这是我的 HTML,它可以工作并显示我的产品列表和复选框.
How can I get a list of all check boxes that I selected with Vue? This is my HTML which works and shows me a list of my products with a checkbox.
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product.id" name="product" type="checkbox" />
<label :for="product.slug"><span></span></label>
</li>
我想要的是当我点击一个按钮时,它会获取我选择的所有复选框.并给我所有的价值观.但是我不知道该怎么做,因为当我什至尝试将 v-model
添加到复选框时它会中断.
What I want is that when I click on a button, it fetches all check boxes that I selected. And give me all the values.
But I can't figure out how to do it, because it'll break when I even try to add a v-model
to the checkbox.
推荐答案
只需将每个复选框 value
与产品和 v-model
绑定到数组 已检查产品
Just bind every checkbox value
with a product and the v-model
to the array checkedProducts
<li v-for="(product, index) in products">
<input :id="product.slug" :value="product" name="product" type="checkbox" v-model="checkedProducts" />
<label :for="product.slug"><span></span></label>
</li>
...
data(){
return{
...
checkedProducts:[]
....
}
}
这篇关于使用 Vue.js 获取所有选中复选框的列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文