vue select 獲取value和lable操作
更新時(shí)間：2020年08月28日 08:41:09 作者：Kelly—zxy
這篇文章主要介紹了vue select 獲取value和lable操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
vue select控件在選擇時(shí)需要把id和name兩個(gè)值都獲取到，實(shí)現(xiàn)方案如下：
select控件代碼
<FormItem label="物資類(lèi)型：" prop="supplyType">
<Select v-model="detailData.supplyType" :label-in-value="true" placeholder="請(qǐng)選擇物資類(lèi)型" @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ǔ)充知識(shí)：vue選擇器select獲取選中項(xiàng)的value和id
今天在nuxt項(xiàng)目中使用element-ui的選擇器時(shí)，有個(gè)需求要獲取options的id和label。
做法如下：
html代碼
在methods中：
這樣就可以精準(zhǔn)的獲取到啦，希望可以幫到你呀！
以上這篇vue select 獲取value和lable操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue?props傳遞的類(lèi)型和寫(xiě)法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
本文主要介紹了element Dropdown組件意想不到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
搭建vue3項(xiàng)目以及按需引入element-ui框架組件全過(guò)程
element是基于vue.js框架開(kāi)發(fā)的快速搭建前端的UI框架,下面這篇文章主要給大家介紹了關(guān)于搭建vue3項(xiàng)目以及按需引入element-ui框架組件的相關(guān)資料,文中通過(guò)圖文以及代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問(wèn)題
下面小編就為大家分享一篇完美解決iview 的select下拉框選項(xiàng)錯(cuò)位的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能
這篇文章主要介紹了vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁(yè)功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了使用vue組件封裝共用的組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue中的混入的使用(vue mixins)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06![詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]](http://img.jbzj.com/images/xgimg/bcimg7.png)
詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]
本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項(xiàng)目] ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題
這篇文章主要介紹了Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題
這篇文章主要介紹了Vue如何處理Axios多次請(qǐng)求數(shù)據(jù)顯示問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01