解决el-select使用v-model绑定的数据被赋值后,显示赋值内容,而不是el-option中对应value的内容
这个问题通常是因为el-select
的v-model
绑定的数据与el-option
的value
值不匹配导致的。确保el-option
的value
属性设置正确,并且与el-select
绑定的数据类型一致。
以下是一个简单的例子:
<template>
<el-select v-model="selectedValue" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
selectedValue: '', // 绑定的数据
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
// ...更多选项
]
};
}
};
</script>
确保selectedValue
的值与options
数组中某个对象的value
相匹配。如果selectedValue
是字符串,那么el-option
的:value
应该是字符串,如果是数字,那么:value
应该是数字。如果类型不匹配,el-select
可能无法正确显示已经选择的值。
评论已关闭