vue select 獲取value和lable操作
vue select控件在選擇時需要把id和name兩個值都獲取到,實現(xiàn)方案如下:
select控件代碼
<FormItem label="物資類型:" prop="supplyType"> <Select v-model="detailData.supplyType" :label-in-value="true" placeholder="請選擇物資類型" @on-change="getVendorId"> <Option v-for="item in supplyTypeList" :value="item.id" :key="item.id" :lable="item.dictionaryName">{{ item.dictionaryName }} </Option> </Select> </FormItem>
change事件
getVendorId: function (val) { let that = this; that.detailData.supplyType=val.value;//獲取label that.detailData.supplyTypeName=val.label;//獲取value },
下拉組件綁定數(shù)據(jù)源
supplyTypeList[ { "id": 45, "dictionaryName": "辦公用品", "dictionaryCode": "nofficeSupplies" } ]
補充知識:vue選擇器select獲取選中項的value和id
今天在nuxt項目中使用element-ui的選擇器時,有個需求要獲取options的id和label。
做法如下:
html代碼
在methods中:
這樣就可以精準(zhǔn)的獲取到啦,希望可以幫到你呀!
以上這篇vue select 獲取value和lable操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
搭建vue3項目以及按需引入element-ui框架組件全過程
element是基于vue.js框架開發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項目以及按需引入element-ui框架組件的相關(guān)資料,文中通過圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能
這篇文章主要介紹了vue+vuex+json-seiver實現(xiàn)數(shù)據(jù)展示+分頁功能,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04Vue如何處理Axios多次請求數(shù)據(jù)顯示問題
這篇文章主要介紹了Vue如何處理Axios多次請求數(shù)據(jù)顯示問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01