Vue解决el-select下拉框选择值后框上不显示问题

目录
文章目录隐藏
  1. 问题描述
  2. 解决思路
  3. 解决办法

问题描述

最近在做项目时用到了 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, '')
  }
}

至此,完美解决el-select下拉框选择值后框上不显示问题,希望对你有帮助。

「点点赞赏,手留余香」

4

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » Vue解决el-select下拉框选择值后框上不显示问题

发表回复