Vue解决el-select下拉框选择值后框上不显示问题
问题描述
最近在做项目时用到了element-ui的el-select下拉框，下拉框数据是通过接口异步获取的，当选择某一个值后，在绑定的change事件中能够看到已赋值成功，但是框上却不显示选中的值。
解决思路
vue无法监听动态新增的属性的变化，需要用$set来为这些属性赋值。
解决办法
// 下拉框<el-form-item label="用户角色" prop="role"><el-select v-model="editObject.role" :placeholder="selectPlaceholder" @change="handleChange"><el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option></el-select></el-form-item>
操作下拉框选中事件：
handleChange(val) {// val 代表 value 值if (val) { // 操作选中角色发生变化this.$set(this.editObject, this.editObject.role, val)} else {this.$set(this.editObject, this.editObject.role, '')}}
还不能解决试试如下方法：
select 选择器第一次可以选中，保存后，进行修改，显示框中不显示选中的值， 需要进行forceUpdate强制进行刷新
至此，完美解决el-select下拉框选择值后框上不显示问题，希望对你有帮助。
本文转自 /13106.html，如有侵权，请联系删除。
