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