vue中的select綁定多個(gè)值
更新時(shí)間：2022年09月05日 09:10:32 作者：銀月流霜
這篇文章主要介紹了vue中的select綁定多個(gè)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue select綁定多個(gè)值
不再通過(guò)v-model和value進(jìn)行綁定
而是通過(guò)綁定索引值Index
然后通過(guò)定義@input=change方法，通過(guò)索引值獲取并更新想要綁定的多個(gè)值
<el-select v-model="basic_info.itemindex" placeholder="" ?@input="change"> ?? ?<el-option v-for="(item,index) in categoryList" :key=index :label="item.categoryName" :value="index" /> </el-select>
change(index) {
? ? ? this.basic_info.categoryCode = this.categoryList[index].categoryCode
? ? ? this.default_return_value = this.categoryList[index].defaultReturnValue
},vue el-select 綁定id值
在實(shí)際需求中，el-select的數(shù)組選項(xiàng)有多個(gè)，展示給用戶選擇的是每個(gè)選項(xiàng)的文本，但是傳給后臺(tái)的數(shù)據(jù)需要文本對(duì)應(yīng)的id
比如選項(xiàng)數(shù)組是：applyTypeList:[{id:1,label:‘甜品’},{id:2,label:‘燒烤’}]
下拉框可選的是甜品和燒烤，但是我們需要記錄的不是甜品和燒烤，而是他們對(duì)應(yīng)的id的值，此時(shí)就需要綁定id值。
HTML
<el-select v-model="applyType" placeholder="申請(qǐng)類型" clearable> ? ? <el-option v-for="item in applyTypeList" :key="item.id" :value="item.id" ?? ?:label="item.label"></el-option> </el-select>
綁定后，applyType會(huì)根據(jù)用戶的選擇而變化成不同的id值。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在使用Vue過(guò)渡動(dòng)畫時(shí),注意選擇器優(yōu)先級(jí),謹(jǐn)慎合并樣式,Vue2中關(guān)于顯示隱藏的類名有v-enter、v-leave以及v-enter-active、v-leave-active等,這些可以用來(lái)定義動(dòng)畫的持續(xù)時(shí)間和樣式,感興趣的朋友跟隨小編一起看看吧2024-09-09
vue打印功能實(shí)現(xiàn)的兩種方法總結(jié)
在項(xiàng)目中,有時(shí)需要打印頁(yè)面的表格,所以下面這篇文章主要給大家介紹了關(guān)于vue打印功能實(shí)現(xiàn)的兩種方法,以及批量打印的完整代碼,需要的朋友可以參考下2021-06-06
vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令詳解
本文通過(guò)實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過(guò)程常用的npm命令,需要的朋友可以參考下2018-06-06
vue3+vite實(shí)現(xiàn)版本更新檢查的示例代碼
本文描述了一個(gè)Vue3和Vite項(xiàng)目中實(shí)現(xiàn)版本更新檢查的解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vue 搭建后臺(tái)系統(tǒng)模塊化開(kāi)發(fā)詳解
這篇文章主要介紹了vue 搭建后臺(tái)系統(tǒng)模塊化開(kāi)發(fā)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)購(gòu)物車功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
這篇文章主要為大家詳細(xì)介紹了Vue非父子組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
解決axios post 后端無(wú)法接收數(shù)據(jù)的問(wèn)題
今天小編就為大家分享一篇解決axios post 后端無(wú)法接收數(shù)據(jù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解
今天小編就為大家分享一篇對(duì)Vue.js之事件的綁定(v-on: 或者 @ )詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09