vue在外部方法给下拉框赋值后不显示label的解决
更新时间：2023年10月13日 14:41:24 作者：煎饼果子就咖啡
这篇文章主要介绍了vue在外部方法给下拉框赋值后不显示label的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue在外部方法给下拉框赋值后不显示label
遇到一个问题，我在外部方法中给下拉框赋值以后显示的是value值，正常应该显示label
原代码如下
在此处给性别赋值了
现象如下
排查后发现在此处应该是给字符串而不是数字
修改后正常
vue下拉框选中不显示的问题
上图：
说明
纠结的事情就是：这种情况出现了很多次，每次都排查很久。
出现的情况
- 在几级联动需要使用到el-select组件。
- 在添加的时候没有出现这样的问题，但是在修改的时候很容易出现。
特别是讲将 form.a 赋值给form.b这就会出现一种情况，form.a的改变老是影响form.b
对比
错误的代码：
var resp = response.data; this.form = resp; this.form.cityId = resp.cityName; this.form.provinceId = resp.provinceName;
本来的response的data里面有cityId的值和provinceId的值， 但是我们又重新的赋值了一次。
改正之后的代码：
var resp = response.data; // 此处解决选择市之后不展示label的情况 this.form.cityId = resp.cityName; this.form.provinceId = resp.provinceName; this.form.id = resp.id; this.form.bankName = resp.bankName; this.form.branchName = resp.branchName; this.form.branchId = resp.branchId; this.form.bankCode = resp.bankCode;
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇vue select选择框数据变化监听方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据，整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下2021-10-10
vite+vue3+element-plus搭建项目的踩坑记录
这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细介绍了vue车牌搜索组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
Vue 3引入了Composition API，这是一套新的API用于编写组件，作为Options API的替代，这篇文章主要介绍了如何优化 Vue.js 应用程序,需要的朋友可以参考下2023-02-02
这篇文章主要给大家介绍了关于Vue使用new Blob()实现不同类型的文件下载功能的相关资料,在Vue项目中,经常用Blob二进制进行文件下载功能,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue源码解析之事件机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
本文主要介绍了Vue在外部配置打包文件夹名称和url地址前缀，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要介绍了Vue3.0版本强势升级点特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2022-06-06
最新评论