问题场景:ElementUI下拉框el-select赋值后无法选值的问题
问题在于el-option在v-for循环的时候,绑定的是对象数组,还是字符串数组
当for循环的是对象数组
的时候是没有这个问题的
,如
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}]
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
当for循环的是字符串数组
的时候就有问题了
,如果初始化的时候,给绑定值赋值,你会发现,下拉选择之后,框内的数据无法更改
options: [
"number",
"name",
"type",
"manageDeptName",
"useDeptName",
"endUsedName",
"registerTime",
],
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"
>
</el-option>
</el-select>
经过这个样的赋值之后,在页面选择下拉数据的时候无法选中(其实已经更改,只是页面没有实时刷新)
所以,解决办法就是使用$forceUpdate()
,在el-select值改变的时候执行刷新组件
<template>
<el-select v-model="value"
placeholder="请选择" @change="$forceUpdate()"> //重点
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
网友评论