好久没用Vue了,最近做一个vue项目时发现用el-select
时出现一个问题:选中列表中的选项,但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。
最后排查后原因是因为下拉框的ng-model
对应的属性是没有在data
里初始化的对象属性,而Vue 是无法监听动态新增的属性的变化的,Vue3好像听说可以了(没有具体测试Vue3)。
两种解决方法:
- 在
el-select
选框组件中绑定change
事件强制刷新
changeSelect(){
this.$nextTick(()=>{
this.$forceUpdate()
})
}
-
change
事件中使用$set
来对属性赋值
changeSelect(val){
this.$set(this.queryParam, this.queryParam.id, val.value)
}