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