el-select下拉框选择点击后不选择新选项问题

好久没用Vue了,最近做一个vue项目时发现用el-select时出现一个问题:选中列表中的选项,但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。
最后排查后原因是因为下拉框的ng-model对应的属性是没有在data里初始化的对象属性,而Vue 是无法监听动态新增的属性的变化的,Vue3好像听说可以了(没有具体测试Vue3)。
两种解决方法:

  1. el-select选框组件中绑定change事件强制刷新
changeSelect(){
  this.$nextTick(()=>{
    this.$forceUpdate()
  })
}
  1. change事件中使用$set来对属性赋值
changeSelect(val){
  this.$set(this.queryParam, this.queryParam.id, val.value)
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容