ElementUI下拉框选择后不显示值

简介: ElementUI下拉框选择后不显示值


  • 问题:vue(ElementUI)下拉框选择后赋值了,但是框上不显示
<!--下拉框-->
<el-form-item label="用户角色" prop="role">
   <el-select v-model="editModel.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>
  • 解决

方法一

下拉框数据是循环调用接口,数据层次太多,render函数没有自动更新,需手动强制刷新

// 手动刷新
handleChange() {
    this.$forceUpdate()
}

方法二

vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值

// 操作下拉框选中事件
handleChange(val) {
  // val 代表 value 值
  if (val) {
    // 操作选中角色发生变化
    this.$set(this.editModel, this.editModel.role, val)
  } else {
    this.$set(this.editModel, this.editModel.role, '')
  }
}


相关文章
|
Linux
【Linux 系统编程】wait函数详解
【Linux 系统编程】wait函数详解
673 0
|
NoSQL 测试技术 Redis
Redis学习笔记之集群重启和遇到的坑
Redis学习笔记之集群重启和遇到的坑
4710 0
Redis学习笔记之集群重启和遇到的坑
|
Kubernetes 容器
k8s集群—node节点的删除与添加
k8s集群—node节点的删除与添加
1437 0
基于若依ruoyi-nbcio支持flowable流程分类里增加流程应用类型
基于若依ruoyi-nbcio支持flowable流程分类里增加流程应用类型
460 1
|
JavaScript
Element_select 选择器 选中框中显示不了选中的值
解决Vue中`el-select`选择器不显示选中值的问题:在`selectChanged`方法中添加`this.$forceUpdate()`,强制组件更新,使输入框显示选择的值。示例代码包括模板和方法。
1968 2
|
安全 开发工具 git
git分布式版本控制系统及在码云上创建项目并pull和push
通过本文的介绍,我们详细讲解了Git的基本概念和工作流程,并展示了如何在码云上创建项目及进行pull和push操作。Git作为一种分布式版本控制系统,为开发者提供了强大的工具来管理代码变更和协作开发。希望本文能帮助您更好地理解和使用Git及码云,提高开发效率和代码质量。
798 18
|
负载均衡 前端开发 应用服务中间件
Nginx负载均衡 以及Linux前后端项目部署
Nginx负载均衡 以及Linux前后端项目部署
494 2
|
网络协议 API 网络安全
发送TCP数据免费API接口教程
此API用于向指定主机发送TCP数据,支持POST/GET请求,需提供用户ID、KEY、接收IP、端口及数据内容。返回状态码和信息提示,示例如下:{&quot;code&quot;:200,&quot;msg&quot;:&quot;发送成功!&quot;}。详情见:https://www.apihz.cn/api/datacstcp.html
603 11
|
Java Maven Spring
SpringBoot项目创建失败或无法启动,启动报错时的常见问题及解决方案
文章列举了在IDEA中创建Spring Boot项目时可能遇到的常见问题及其解决方案,如项目不被识别为Maven项目、依赖未找到或报红、JDK版本不一致和POM文件中的Jar包下载失败等问题。
6718 0
SpringBoot项目创建失败或无法启动,启动报错时的常见问题及解决方案