el-select 數(shù)據(jù)回顯,只顯示value不顯示lable問題
el-select數(shù)據(jù)回顯,只顯示value不顯示lable
點(diǎn)擊actions，把當(dāng)前VIPGrade ID傳過去
這個(gè)時(shí)候我們可以看到，select List是有數(shù)據(jù)的，但是為什么只顯示value，并沒有顯示label呢？
這個(gè)時(shí)候我們打印一下，從主頁面?zhèn)魅氲?id 是什么類型，再看一下我們的 list 里面的id是什么類型
通過控制臺(tái)我們可以看到，主頁面?zhèn)魅氲膇d 是String類型的，而我們 list 的 VIPGraded 是Number類型的，看到這里我們就知道原因了；
我們?cè)跀?shù)據(jù)回顯 重置的我們 VIPGradeID 的時(shí)候，把類型轉(zhuǎn)換一個(gè)即可 再看效果圖
此時(shí)我們已經(jīng)看到，數(shù)據(jù)回顯時(shí)，就可以綁定上對(duì)應(yīng)的 ID 值，并且顯示對(duì)應(yīng)的Label 值；
在處理el-select數(shù)據(jù)回顯時(shí)遇到的問題
在開發(fā)vue項(xiàng)目的時(shí)候，會(huì)普遍的用到elementUI組件庫，當(dāng)用道其中的下拉框組件時(shí)，會(huì)遇到一點(diǎn)兒?jiǎn)栴}。先看如下代碼：
<el-select v-model='regin'> ?? ??? ?<el-option ?? ??? ?v-for="item in option" ?? ??? ?:key="item.value" ?? ??? ?:label="item.label" ?? ??? ?:value="item.value" ?? ??? ?></el-option> </el-select>
data(){
?? ??? ?return{
?? ??? ??? ??? ?option:[
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'1'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項(xiàng)1'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'2'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項(xiàng)2'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ?value:'3'，
?? ??? ??? ??? ??? ??? ??? ??? ?label:'選項(xiàng)3'
?? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ?],
?? ??? ??? ??? ?regin:''
?? ??? ?}
}而v-model綁定的regin值實(shí)際上時(shí)選中選項(xiàng)的id值。
那么在處理數(shù)據(jù)會(huì)顯得時(shí)候，往往要根據(jù)后臺(tái)返回的id值來默認(rèn)選中某選項(xiàng)。代碼如下：
this.regin = res.data.condition //condition 后臺(tái)返回?cái)?shù)據(jù) 值為數(shù)值1 //conditionName 選項(xiàng)1
這樣寫的后果是select會(huì)直接回顯一個(gè)1
如果想要select顯示“選項(xiàng)1”，
this.regin = String(res.data.condition)
就要這樣寫才可以；
原因是你賦給this.regin的值的類型要與rejin綁定的值的類型一樣，才會(huì)回顯成功。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)
這篇文章主要介紹了利用Dectorator分模塊存儲(chǔ)Vuex狀態(tài)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
解決Vue 瀏覽器后退無法觸發(fā)beforeRouteLeave的問題
這篇文章主要介紹了解決Vue 瀏覽器后退無法觸發(fā)beforeRouteLeave的問題,需要的朋友可以參考下2017-12-12
Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例
SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項(xiàng)目開發(fā)過程中,我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了關(guān)于axios在vue中的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue通過子組件修改父組件prop的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue通過子組件修改父組件prop的幾種實(shí)現(xiàn)方式,比較常用的方式是通過Prop單向傳遞的規(guī)則，需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue 動(dòng)態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標(biāo)簽添加背景圖片，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了詳解Vue中Axios封裝API接口的思路及方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue的面包屑和標(biāo)簽tag，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息)
這篇文章主要介紹了Vue 清除Form表單校驗(yàn)信息的解決方法(清除表單驗(yàn)證上次提示信息),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12