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