问题描述:
首次修改后正常,但是第二次或者多次修改后,el-select不显示选中的项目。在input框内不显示输入的内容。
关键代码(表单的某两项):
绑定的值为form表单绑定值aiForm下的值extConfig对象下面的值
<el-form-item label="更多配置:">
<el-select v-model="aiForm.extConfig.defectSizeType"
placeholder="请选择defectSizeType"
style="width:100%;margin-bottom:10px"
clearable
filterable
multiple
collapse-tags>
<el-option v-for="item in sizeTypeOptions"
:key="item.value"
:label="item.label "
:value="item.value">
</el-option>
</el-select>
<el-input v-model="aiForm.extConfig.defectLength"
placeholder="请输入defectLength"
type='number'
style="width:100%"></el-input>
</el-form-item>
</el-form>
var vm = new Vue({
el:'#rrapp',
data:{
aiForm:{
extConfig: {
extConfig: 'extConfig',
defectSizeType: [],
defectLength: ''
}
},
sizeTypeOptions: [{
value: 'A',
label: 'A'
}, {
value: 'C',
label: 'C'
}, {
value: 'EE',
label: 'EE'
}, {
value: 'G',
label: 'G'
}],
})
el-select和el-input选择器,当绑定值为嵌套比较深的值时,容易出现无法显示选中内容的问题。但是只是在页面上没有选中的UI,实际上选中的内容是绑定上的。
官网说明:
解决方式:
使用自带组件实例$forceUpdate()
解决代码:
//只用在 el-select、el-input上绑定分别绑定 @change、@input事件 使其触发forceUpdate
<el-form-item label="更多配置:">
<el-select v-model="aiForm.extConfig.defectSizeType"
placeholder="请选择defectSizeType"
style="width:100%;margin-bottom:10px"
clearable
filterable
multiple
collapse-tags
@change="$forceUpdate()">
<el-option v-for="item in sizeTypeOptions"
:key="item.value"
:label="item.label "
:value="item.value">
</el-option>
</el-select>
<el-input v-model="aiForm.extConfig.defectLength"
placeholder="请输入defectLength"
type='number'
style="width:100%"
@input="$forceUpdate()"></el-input>
</el-form-item>