如何避免下拉框赋值出错，导致item成数组多出额外值？
摘要：下拉框的item变成一个对象并且多出额外的值 更改下拉框的数据源，在赋值的时候，本来应该点value时，但是没有点value。 会造成item的值变成一个数组，并且这个数组还会多出额外的值，本来应该是一个对象的。 复现上述场景的代码 &am
下拉框的item变成一个对象并且多出额外的值
更改下拉框的数据源，在赋值的时候，本来应该点value时，但是没有点value。
会造成item的值变成一个数组，并且这个数组还会多出额外的值，本来应该是一个对象的。
复现上述场景的代码
<template>
<div class="about">
<el-select
v-model="currentCityTypeValue"
placeholder="Select"
style="width: 240px"
@change="setHandler"
>
<el-option
v-for="item in cityTypeSelect"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
{{ currentCityTypeValue }}
<el-select :key="currentCityTypeValue" v-model="selectCityValue" placeholder="Select" style="width: 340px">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value"
>
<div v-if="currentCityTypeValue==='B'">{{ item }}</div>
</el-option>
</el-select>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const currentCityTypeValue = ref('A')
const selectCityValue = ref('')
const cityTypeSelect =ref([
{value:'A',label:'设置A城市数据源'},
{value:'B',label:'设置B城市数据源'}
])
const cityAList = ref([
{
value: 'a1',
label: 'A1城市',
},
{
value: 'a2',
label: 'A2城市',
}
])
const cityBList = ref([
{
value: 'b1',
userName: 'B1城市', //这里不在是label而是userName
label: 'B1城市',
},
{
value: 'b2',
userName: 'B2城市', // 这里不在是label而是userName
}
])
const cities = ref([])
// 初始的时候设置A城市的数据源
cities.value = cityAList.value
function setHandler(){
if(currentCityTypeValue.value==='A'){
cities.value = cityAList.value
}else if(currentCityTypeValue.value==='B'){
/**
* 这里本来应该是点value的。但是你没有点value。
* 会造成item的值变成一个数组，并且这个数组还会多出额外的值。
* 本来应该是一个对象的。
* */
cities.value = cityBList
console.log('B',cities.value)
}
}
</script>
<style lang="scss" scoped>
.about{
margin-top: 100px;
margin-left: 100px;
}
</style>