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)選擇主線路">
<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)文章
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來(lái)看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
解決iview table組件里的 固定列 表格不自適應(yīng)的問(wèn)題
這篇文章主要介紹了解決iview table組件里的 固定列 表格不自適應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
跨域問(wèn)題是由瀏覽器引起的安全限制,而不是Vue框架本身導(dǎo)致的,Vue本身并不限制跨域訪問(wèn),它只是一個(gè)前端框架,負(fù)責(zé)構(gòu)建用戶界面和處理數(shù)據(jù)邏輯,本文給大家介紹了在Vue中解決跨域問(wèn)題的常用方式,需要的朋友可以參考下2023-10-10
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關(guān)于Vue3中emits與attrs區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
解決vue初始化項(xiàng)目一直停在downloading template的問(wèn)題
這篇文章主要介紹了解決vue初始化項(xiàng)目一直停在downloading template的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件
這篇文章主要利用websocked 建立長(zhǎng)連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽(tīng)消息變化，并驅(qū)動(dòng)頁(yè)面變化實(shí)現(xiàn)實(shí)時(shí)聊天，感興趣的可以了解一下2021-08-08