el-select 中的el-options用v-for循环后选中的永远是最后一个
这是因为el-select中的v-model绑定的是一个变量,而el-options中的v-for循环是在不同的作用域中,每个作用域都有一个独立的变量,导致在选中时无法同步更新到父组件的变量。
解决方法是在el-options中绑定一个value属性,并将其绑定到父组件的变量上,在选中时更新父组件的变量。示例代码如下:
<el-select v-model="selected">
<el-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</el-option>
</el-select>
export default {
data() {
return {
selected: '', // 父组件的变量
options: [
{ label: '选项1', value: 'option1' },
{ label: '选项2', value: 'option2' },
{ label: '选项3', value: 'option3' }
]
}
},
methods: {
handleChange(value) {
this.selected = value // 更新父组件的变量
}
},
mounted() {
this.selected = this.options[0].value // 初始化选中第一个选项
}
}
在el-options中绑定value属性,并在选中时调用handleChange方法更新父组件的变量,这样就可以正确地选中对应的选项了。
原文地址: https://www.cveoy.top/t/topic/bqbN 著作权归作者所有。请勿转载和采集!