vue select 獲取value和lable操作
vue select控件在選擇時(shí)需要把id和name兩個(gè)值都獲取到,實(shí)現(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' } ]
補(bǔ)充知識:vue選擇器select獲取選中項(xiàng)的value和id
今天在nuxt項(xiàng)目中使用element-ui的選擇器時(shí),有個(gè)需求要獲取options的id和label。
做法如下:
html代碼
在methods中:
這樣就可以精準(zhǔn)的獲取到啦,希望可以幫到你呀!
以上這篇vue select 獲取value和lable操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. vue+vuex+axios從后臺獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作2. android studio實(shí)現(xiàn)簡單的計(jì)算器(無bug)3. SpringBoot使用Captcha生成驗(yàn)證碼4. springboot項(xiàng)目整合druid數(shù)據(jù)庫連接池的實(shí)現(xiàn)5. Python 忽略文件名編碼的方法6. JavaScript實(shí)現(xiàn)簡易計(jì)算器小功能7. android 控件同時(shí)監(jiān)聽單擊和雙擊實(shí)例8. 解決vue頁面刷新,數(shù)據(jù)丟失的問題9. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作10. python logging.info在終端沒輸出的解決
