使用Vue.js获取所有选中复选框的列表

用户1469734

如何获得Vue选中的所有复选框的列表这是我的HTML,可以正常工作,并通过复选框显示我的产品列表。

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

我想要的是,当我单击按钮时,它会提取我选择的所有复选框。并给我所有的价值观。但是我不知道该怎么做,因为当我尝试将a添加v-model到复选框时,它会中断

布萨吉拉·卜拉欣

只需将每个复选框value与产品绑定,然后将其绑定v-model到数组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:[]
   ....
   }
 }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

选中/取消选中组Vue.js中的所有复选框

选中Vue.js的所有复选框(用于在.vue文件中循环的问题)

使用jQuery获取具有特定类名的所有选中的复选框

如何使用 jquery/javascript 获取选中复选框的所有值?

使用icheck选中所有复选框

使用 Linq 取消选中所有复选框

使用任何选中的复选框启用/禁用所有输入和复选框

如何使用复选框获取所有选定的列表项

如何使用jQuery使用按钮来选中/取消选中所有复选框?

使用 jquery 和 Bootstrap 选中/取消选中所有复选框的问题

当取消选中所有子项父复选框时,也应使用jquery取消选中

使用绑定而不是循环来选中/取消选中所有复选框?

使用jQuery选中和取消选中所有复选框

如何使用AngularJS选中/取消选中所有复选框?

使用jQuery选择列表中的所有复选框

在 Vue Js 中选中取消选中复选框

使用Javascript获取“所有”复选框的值

取消选中一个复选框后如何启用所有复选框?使用JavaScript

使用JQuery在单击父复选框时选中所有直接子复选框

jQuery代码(如果已选中复选框),请选择所有其他复选框-使用Laravel

使用ES6箭头功能获取选中的复选框值的列表

使用jQuery获取div中已选中复选框的列表

在使用angular删除文件时选中所有复选框时出现问题

取消选中所有复选框,使用jQuery禁用一个

如何防止使用jQuery取消选中所有复选框?

如何知道使用angular2选中了所有复选框?

jquery - 计算使用 checkAll 按钮选中的所有复选框

使用文本框动态取消选中来自容器的所有复选框

以编程方式选中所有复选框(使用 CSS3 ::before 和 ::after)