【vue】---- ElementUI下拉框选择后赋值了，但是框上不显示问题

一、问题描述

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, '')
  }
}