使用 Vue.js 获取所有选中复选框的列表
Get the list of all selected check boxes with Vue.js
如何获取我使用 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>
我想要的是当我点击一个按钮时,它会获取我选中的所有复选框。并给我所有的值。
但我不知道该怎么做,因为当我尝试向复选框添加 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:[]
....
}
}
如何获取我使用 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>
我想要的是当我点击一个按钮时,它会获取我选中的所有复选框。并给我所有的值。
但我不知道该怎么做,因为当我尝试向复选框添加 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:[]
....
}
}