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