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