解决el-select使用v-model绑定的数据被赋值后,显示赋值内容,而不是el-option中对应value的内容
warning:
这篇文章距离上次修改已过440天,其中的内容可能已经有所变动。
这个问题通常是因为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可能无法正确显示已经选择的值。
评论已关闭