elementUI select組件value值注意事項(xiàng)詳解
select組件的使用方式就不細(xì)說(shuō)，可查看select組件使用方式
主要要說(shuō)一下注意事項(xiàng)：
select組件可以動(dòng)態(tài)生成option選項(xiàng)，option選項(xiàng)綁定對(duì)應(yīng)的文本值和value值。
有時(shí)候我們發(fā)現(xiàn) 默認(rèn)顯示的內(nèi)容會(huì)顯示具體的value值而不是對(duì)應(yīng)的文本，這種情況原因都是：
v-model綁定的值與option選項(xiàng)value值類(lèi)型不符，
常規(guī)就是number與string
通用我們會(huì)循環(huán)一個(gè)數(shù)組、對(duì)象生成option選項(xiàng)
1.簡(jiǎn)單數(shù)組
const array1=[1,2,3] <el-select v-model="seletValue"> <el-option v-for="item in array1" :key="item" :value="item" :label="item"> </el-option> </el-select>
此時(shí) option 的value 是number 類(lèi)型，v-model綁定的seletValue也必須是number類(lèi)型
2.對(duì)象數(shù)組
const arrayOptions=[{key:0,text:'a'},{key:0,text:'b'},{key:0,text:'c'}}]
<el-select v-model="seletValue">
<el-option v-for="item in arrayOptions" :key="item.key" :value="item.key" :label="item.text">
</el-option>
</el-select>
因?yàn)槲覀冇胕tem.key作為option的value，item.key 是json中的值，
此時(shí) option的value是number類(lèi)型，v-model綁定的seletValue也必須是number類(lèi)型 例如 seletValue=1
3.對(duì)象
const options={0:'a',1:'b',2:'c',}
<el-select v-model="seletValue">
<el-option v-for="(value,key) in options" :key="key" :value="key" :label="item.value">
</el-option>
</el-select>
因?yàn)樵趈son對(duì)象的 鍵:值 結(jié)構(gòu)中，鍵的都是string類(lèi)型，這里我們把json的鍵作為 option的value，
此時(shí) option的value其實(shí)是string 類(lèi)型，v-model綁定的seletValue也必須是string類(lèi)型 例如 seletValue='1'
如果提交接口的數(shù)據(jù)要求是number怎么辦，只需要在提交數(shù)據(jù)之前轉(zhuǎn)換下Number(seletValue)就可以了
遇到這種情況可以參照上述情況檢查代碼調(diào)試
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過(guò)代碼詳解v-show用法，本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
在本篇文章里小編給大家分享的是關(guān)于vuex入門(mén)最詳細(xì)整理的相關(guān)內(nèi)容，需要的朋友們參考下。2020-03-03
Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明
這篇文章主要介紹了Ant?Design?of?Vue的樹(shù)形控件Tree的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3在Setup中使用axios請(qǐng)求獲取的值方式
這篇文章主要介紹了Vue3在Setup中使用axios請(qǐng)求獲取的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題
這篇文章主要介紹了vue3使用vue-cli引入windicss報(bào)錯(cuò)Can‘t resolve windi.css問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)帶過(guò)渡效果的下拉菜單功能
這篇文章主要為大家詳細(xì)介紹了vue仿寫(xiě)帶過(guò)渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
Vue在頁(yè)面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單
這篇文章主要介紹了Vue在頁(yè)面右上角實(shí)現(xiàn)可懸浮/隱藏的系統(tǒng)菜單,實(shí)現(xiàn)思路大概是通過(guò)props將showCancel這個(gè)Boolean值傳遞到子組件，對(duì)父子組件分別綁定事件，來(lái)控制這個(gè)系統(tǒng)菜單的顯示狀態(tài)。需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)的實(shí)現(xiàn)
本文主要介紹了使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07