vue select 獲取value和lable操作

vue select控件在選擇時需要把id和name兩個值都獲取到，實現方案如下：

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},

下拉組件綁定數據源

supplyTypeList[ { 'id': 45, 'dictionaryName': '辦公用品', 'dictionaryCode': 'nofficeSupplies' } ]

補充知識：vue選擇器select獲取選中項的value和id

今天在nuxt項目中使用element-ui的選擇器時，有個需求要獲取options的id和label。

做法如下：

html代碼

在methods中：

這樣就可以精準的獲取到啦，希望可以幫到你呀！

以上這篇vue select 獲取value和lable操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。