在 antdesign vue 不同的数组中 v-for多个复选框
时间: 2023-10-21 13:00:21 浏览: 183
你可以使用`v-for`循环渲染多个数组,并在每个数组中使用`v-model`绑定复选框的值。例如:
```html
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<h3>{{ item.title }}</h3>
<ul>
<li v-for="(option, optionIndex) in item.options" :key="optionIndex">
<label>
<input type="checkbox" :value="option" v-model="selectedOptions[index]">
{{ option }}
</label>
</li>
</ul>
</div>
<p>Selected options: {{ selectedOptions }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{
title: 'Fruits',
options: ['Apple', 'Banana', 'Orange']
},
{
title: 'Vegetables',
options: ['Carrot', 'Broccoli', 'Potato']
}
],
selectedOptions: []
}
}
}
</script>
```
在上面的示例中,我们使用`v-for`循环渲染`items`数组,并在每个数组中循环渲染`options`数组中的选项。我们为每个选项绑定一个复选框,并使用`v-model`将其值绑定到`selectedOptions`数组中。这样,我们就可以跟踪用户选择的所有选项。最后,我们只需在模板中显示`selectedOptions`数组即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)