el-select綁定值遇到的問(wèn)題小結(jié)
el-select綁定值的坑
碰到一個(gè)問(wèn)題，選擇框的數(shù)據(jù)是后端傳過(guò)來(lái)的，下拉框的數(shù)據(jù)也是后端傳過(guò)來(lái)的，但是打開(kāi)下拉框時(shí)，發(fā)現(xiàn)數(shù)據(jù)沒(méi)有高亮。
最后發(fā)現(xiàn)，只要選擇框v-model給的值和option的value綁定的值一致，就可以高亮。
大多數(shù)情況下，都綁定的是value值（下圖的name），所以發(fā)現(xiàn)不了這個(gè)問(wèn)題。
其實(shí)兩個(gè)都綁定id也是可以的，只要兩個(gè)綁定的一致就行。
<el-select v-model="form" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:label="item.name"
:value="item.id" /> //value綁定的值是id
</el-select>
const options = [
{
id: '123',
name: '名字一'
},
{
id: '456',
name: '名字二'
},
{
id: '789',
name: '名字三'
}
]
let form= ref('123') //v-model給的值也是id不是說(shuō)，form給的值是什么就顯示什么，這里form給123，但是選擇框顯示的還是名字一。
因此，option的label決定了顯示。
補(bǔ)充：
elment-plus中el-select組件綁定對(duì)象踩坑
<el-select v-model="row.way" value-key="id" clearable filterable placeholder="請(qǐng)選擇主線(xiàn)路">
<el-option
v-for="(item,index) in listWay"
:key="index"
:label="item.name"
:value="item"/>
</el-select>以上時(shí)可以正常執(zhí)行的代碼，其中row.way是一個(gè)對(duì)象。踩坑記錄一下（尤其第一個(gè)）：
1、el-select綁定對(duì)象不僅要協(xié)商v-model，并且一定要加上value-key。不然選啥都不變，像個(gè)傻子一樣；
2、v-for中兩種寫(xiě)法，一個(gè)是"item in list" 或者 "(item,index) in list"
3、el-select中v-model綁定對(duì)象，則el-option中 :value也必須是對(duì)象
到此這篇關(guān)于el-select綁定值的坑的文章就介紹到這了,更多相關(guān)el-select綁定值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式
這篇文章主要介紹了vue-treeselect及el-tree點(diǎn)擊節(jié)點(diǎn)獲取上級(jí)節(jié)點(diǎn)的數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
純JS如何實(shí)現(xiàn)vue.js下的雙向綁定功能
對(duì)于vue下的雙向綁定功能，個(gè)人理解為在處理邏輯的過(guò)程中緩存了大量的node對(duì)象，node對(duì)象可以是html標(biāo)簽、文本內(nèi)容。既然選擇了緩存這些對(duì)象，那么在用的過(guò)程中哪里需要改變就把node拿出來(lái)，進(jìn)行標(biāo)簽屬性的變更或者文本內(nèi)容的修改。本文主要講了如何實(shí)現(xiàn)雙向綁定2021-06-06
插槽（Slot）是Vue提出來(lái)的一個(gè)概念,正如名字一樣,插槽用于決定將所攜帶的內(nèi)容,插入到指定的某個(gè)位置,從而使模板分塊,具有模塊化的特質(zhì)和更大的重用性,下面這篇文章主要給大家介紹了關(guān)于vue2中插槽(slot)的基本使用規(guī)范的相關(guān)資料,需要的朋友可以參考下2022-03-03
vue-quill-editor+plupload富文本編輯器實(shí)例詳解
這篇文章主要介紹了vue-quill-editor+plupload富文本編輯器實(shí)例詳解,需要的朋友可以參考下2018-10-10
使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法
下面小編就為大家分享一篇使用live-server快速搭建本地服務(wù)器+自動(dòng)刷新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue中this.$createElement方法的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇內(nèi)容給大家詳細(xì)分析了關(guān)于vue數(shù)據(jù)控制視圖的源碼以及重點(diǎn)做了注釋?zhuān)信d趣的朋友參考學(xué)習(xí)下。2018-03-03
vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例
下面小編就為大家分享一篇vue頁(yè)面切換到滾動(dòng)頁(yè)面顯示頂部的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例
下面小編就為大家?guī)?lái)一篇使用vue-resource進(jìn)行數(shù)據(jù)交互的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
本篇文章主要介紹了自定義vue組件發(fā)布到npm的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05