<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源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼探究之虛擬節(jié)點(diǎn)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
vue項(xiàng)目中常用解決跨域的方法總結(jié)(CORS和Proxy)
在vue項(xiàng)目中,一般我們會(huì)遇到跨域的問題,vue項(xiàng)目中解決跨域是非常簡(jiǎn)單的,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中常用解決跨域的方法,主要解釋CROS和Proxy兩種方式,需要的朋友可以參考下
2022-12-12
深入理解vue Render函數(shù)
本篇文章主要介紹了深入理解vue Render函數(shù)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-07-07
vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)
這篇文章主要介紹了vue.js移動(dòng)端app之上拉加載以及下拉刷新實(shí)戰(zhàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09
Vue中的change事件無效問題及解決
這篇文章主要介紹了Vue中的change事件無效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)（附源碼）
這篇文章主要介紹了利用Vue.js框架實(shí)現(xiàn)火車票查詢系統(tǒng)的相關(guān)資料,，文中給出了詳細(xì)的介紹與示例代碼，并在文章結(jié)尾給出了完整的項(xiàng)目下載，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-02-02
Vue3項(xiàng)目中配置TypeScript和JavaScript的兼容
在Vue3開發(fā)中,常見的使用JavaScript（JS）編寫代碼,但也會(huì)有調(diào)整編寫語(yǔ)言使用TypeScript（TS）的需求,因此,在Vue3項(xiàng)目設(shè)置中兼容TS和JS是刻不容緩的重要任務(wù),
2023-08-08
vuex actions異步修改狀態(tài)的實(shí)例詳解
今天小編就為大家分享一篇vuex actions異步修改狀態(tài)的實(shí)例詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue結(jié)合element-ui使用示例
這一篇主要是創(chuàng)建一個(gè)vue項(xiàng)目并結(jié)合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-01-01
vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02