vue在外部方法給下拉框賦值后不顯示label的解決

更新時(shí)間：2023年10月13日 14:41:24 作者：煎餅果子就咖啡

這篇文章主要介紹了vue在外部方法給下拉框賦值后不顯示label的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue在外部方法給下拉框賦值后不顯示label

遇到一個(gè)問(wèn)題，我在外部方法中給下拉框賦值以后顯示的是value值，正常應(yīng)該顯示label

原代碼如下

在此處給性別賦值了

現(xiàn)象如下

排查后發(fā)現(xiàn)在此處應(yīng)該是給字符串而不是數(shù)字

修改后正常

vue下拉框選中不顯示的問(wèn)題

上圖：

說(shuō)明

糾結(jié)的事情就是：這種情況出現(xiàn)了很多次，每次都排查很久。

出現(xiàn)的情況

在幾級(jí)聯(lián)動(dòng)需要使用到el-select組件。
在添加的時(shí)候沒(méi)有出現(xiàn)這樣的問(wèn)題，但是在修改的時(shí)候很容易出現(xiàn)。

特別是講將 form.a 賦值給form.b這就會(huì)出現(xiàn)一種情況，form.a的改變老是影響form.b

對(duì)比

錯(cuò)誤的代碼：

var resp = response.data;
this.form = resp;
this.form.cityId = resp.cityName;
this.form.provinceId = resp.provinceName;

本來(lái)的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;

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue select選擇框數(shù)據(jù)變化監(jiān)聽(tīng)方法
今天小編就為大家分享一篇vue select選擇框數(shù)據(jù)變化監(jiān)聽(tīng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
這篇文章主要介紹了使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來(lái)哦展開(kāi)內(nèi)容,需要的小伙伴可以參考一下
2021-10-10
vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，在vue中數(shù)據(jù)請(qǐng)求需要先安裝axios。這篇文章主要介紹了vue axios數(shù)據(jù)請(qǐng)求及vue中使用axios的方法,需要的朋友可以參考下
2018-09-09
vue車(chē)牌搜索組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue車(chē)牌搜索組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
教你如何優(yōu)化?Vue.js?應(yīng)用程序
Vue?3引入了Composition?API，這是一套新的API用于編寫(xiě)組件，作為Options?API的替代，這篇文章主要介紹了如何優(yōu)化?Vue.js?應(yīng)用程序,需要的朋友可以參考下
2023-02-02
Vue使用new?Blob()實(shí)現(xiàn)不同類型的文件下載功能
這篇文章主要給大家介紹了關(guān)于Vue使用new?Blob()實(shí)現(xiàn)不同類型的文件下載功能的相關(guān)資料,在Vue項(xiàng)目中,經(jīng)常用Blob二進(jìn)制進(jìn)行文件下載功能,需要的朋友可以參考下
2023-07-07
vue源碼解析之事件機(jī)制原理
這篇文章主要介紹了vue源碼解析之事件機(jī)制原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Vue在外部配置打包文件夾名稱和url地址前綴
本文主要介紹了Vue在外部配置打包文件夾名稱和url地址前綴，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-06-06
Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2022-06-06