Vue element循环生成多个select 怎么获取选中的值？
文章描述：
Vue循环多个Select下拉选择框，可以获取选择值以及设置默认值
<template>
<div>
<div v-for="(item,index) in list" :key="index" class="item">
<el-select v-model="models[index]" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
<el-button type="success" @click="click">点击</el-button>
</div>
</template>
<script>
export default {
data() {
return {
list:['a','b','c'],
models:[],
options: [
{
value: '选项1',
label: '黄金糕'
},
{
value: '选项2',
label: '双皮奶'
},
{
value: '选项3',
label: '蚵仔煎'
},
{
value: '选项4',
label: '龙须面'
},
{
value: '选项5',
label: '北京烤鸭'
},
],
arr:['选项1','选项3','选项5']
}
},
mounted() {
this.models = Array(this.list.length).fill('')
console.log(this.models)
this.arr.forEach((item,index)=>{
this.models[index] = item
})
},
methods:{
click(){
console.log(this.models)
}
}
}
</script>
<style>
.item{
margin-bottom: 10px;
}
</style>
发布时间：2023/07/09
发表评论