溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue利用 select 如何實現(xiàn)獲取value和lable

發(fā)布時間：2020-11-06 16:55:38 來源：億速云 閱讀：398 作者：Leah 欄目：開發(fā)技術(shù)

vue利用 select 如何實現(xiàn)獲取value和lable？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(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代碼

vue利用 select 如何實現(xiàn)獲取value和lable

在methods中：

vue利用 select 如何實現(xiàn)獲取value和lable

看完上述內(nèi)容，你們掌握vue利用 select 如何實現(xiàn)獲取value和lable的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手