vue select 獲取value和lable操作
阿新 • • 發佈:2020-08-30
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操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。