世纪常熟网（Vue解决el-select下拉框选择值）

用户投稿 • 2021-09-14 00:09 星期二 • 阅读 349

世纪常熟网：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, '')
  }
}

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

本文《世纪常熟网（Vue解决el-select下拉框选择值）》由网赚联盟（ wangzhuan.org.cn ）整理或原创，感谢您的阅读。

随机文章

站长导航
搜素引擎算法
关键词排名优化
GEO培训
SEO小小课堂网
站长导航
友情链接交换
关键词排名优化

百度搜索“网赚联盟”即可找到本站，微信搜索“小小课堂网”关注小小课堂网公众号。网赚联盟（ wangzhuan.org.cn ）欢迎用户投稿，发布者：用户投稿，文章版权归作者所有，投稿文章不代表网赚联盟立场，中二少年发布为网赚联盟原创文章，转载请注明出处：https://wangzhuan.org.cn/24871.html