v-for遍历el-checkbox 怎么使用v-model收集数据
时间: 2023-09-26 22:11:04 浏览: 837
v-for遍历el-checkbox时,可以通过给每个checkbox绑定一个唯一的value值或者key值,然后使用一个数组作为v-model的值,将选中的checkbox的value或key值加入到数组中即可收集数据。例如:
```
<el-checkbox-group v-model="checkedValues">
<el-checkbox v-for="item in checkboxOptions" :label="item.value" :key="item.id">{{ item.label }}</el-checkbox>
</el-checkbox-group>
<script>
export default {
data() {
return {
checkboxOptions: [
{ id: 1, label: 'Checkbox 1', value: 'checkbox1' },
{ id: 2, label: 'Checkbox 2', value: 'checkbox2' },
{ id: 3, label: 'Checkbox 3', value: 'checkbox3' }
],
checkedValues: []
}
}
}
</script>
```
在上面的例子中,checkboxOptions数组存储了所有的选项,包括每个选项的id、label和value值。通过v-for遍历checkboxOptions数组,将每个选项渲染成el-checkbox组件,其中label属性绑定选项的label值,而value属性绑定选项的value值。el-checkbox-group组件的v-model绑定了checkedValues数组,最终选中的选项值会被加入checkedValues数组中。
阅读全文