Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值

Posted 小行星125

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值相关的知识,希望对你有一定的参考价值。

问题描述:
多选下拉框,选中列表中的选项,但输入框不显示已经选中的数据并且下拉框中已选中的数据不是选中状态。

问题原因:
Vue 无法监听动态新增的属性的变化。

问题解决:
方法一: 在el-select选框组件中绑定change事件,如下:

changeData() 
	this.$nextTick(() => 
   		this.$forceUpdate()
	)

方法二:change事件中使用$set来对属性赋值,如下:

changeData(val) 
	this.$set(this.formData, this.formData.id, val.value)

以上是关于Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值的主要内容,如果未能解决你的问题,请参考以下文章

Vue踩坑之 el-select下拉框多选,选择后赋值成功,输入框不显示选中的值

el-select下拉框多选远程搜索反显

el-select下拉框多选远程搜索反显

el-select多选情况下回显的问题

elementui 获取下拉框中文名字

jQuery 多选下拉框插件