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监听使用方法和过滤器实现
这篇文章主要介绍了Vue监听使用方法和过滤器实现，过滤器为页面中数据进行强化，具有局部过滤器和全局过滤器
2022-06-06
Vue3 中的 readonly 特性及函数使用详解
readonly是Vue3中提供的一个新特性，用于将一个响应式对象变成只读对象，这篇文章主要介绍了Vue3 中的 readonly 特性详解,需要的朋友可以参考下
2023-04-04
Vue3之列表动画和状态动画示例详解
这篇文章主要为大家介绍了Vue3之列表动画和状态动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
vue3+arco design通过动态表单方式实现自定义筛选功能
这篇文章主要介绍了vue3+arco design通过动态表单方式实现自定义筛选,本文主要实现通过动态表单的方式实现自定义筛选的功能,用户可以自己添加筛选的项目,筛选条件及筛选内容,需要的朋友可以参考下
2024-05-05
vue实现文字横向无缝走马灯组件效果的实例代码
这篇文章主要介绍了vue 文字横向无缝走马灯组件的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-04-04
vue页面跳转实现页面缓存操作
这篇文章主要介绍了vue页面跳转实现页面缓存操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
详解vue样式穿透的几种方式
本文主要介绍了vue样式穿透的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
vue 面包屑导航组件封装
本文主要介绍了vue 面包屑导航组件封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Vue如何实现打包资源按时间戳方式
这篇文章主要介绍了Vue如何实现打包资源按时间戳方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-05-05
详解Vue 全局引入bass.scss 处理方案
本篇文章主要介绍了详解Vue 全局引入bass.scss 处理方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03