vue select 獲取value和lable操作
更新時(shí)間：2020年08月28日 08:41:09 作者：Kelly—zxy
這篇文章主要介紹了vue select 獲取value和lable操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果實(shí)例(webpack-theme-color-replacer的使用)
換皮膚一般都是點(diǎn)擊一個(gè)按鈕彈出一些皮膚的選項(xiàng),選中選項(xiàng)后皮膚生效,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)一鍵網(wǎng)站換膚效果的相關(guān)資料,文中主要介紹的是webpack-theme-color-replacer的使用,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue自定義指令詳解,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了詳解Vue中組件傳值的多重實(shí)現(xiàn)方式,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-08-08
vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能
這篇文章主要介紹了vue實(shí)現(xiàn)中部導(dǎo)航欄布局功能，本文圖文并茂，代碼實(shí)例相結(jié)合介紹的非常詳細(xì)，需要的朋友參考下吧2019-07-07
vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件
這篇文章主要介紹了vue@cli3項(xiàng)目模板怎么使用public目錄下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個(gè)字符串中是否包含某個(gè)元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
Vue?el-table實(shí)現(xiàn)右鍵菜單功能
這篇文章主要為大家詳細(xì)介紹了Vue?el-table實(shí)現(xiàn)右鍵菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊
這篇文章主要介紹了如何將iconfont圖標(biāo)引入到vant的Tabbar標(biāo)簽欄里邊，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)
這篇文章主要介紹了基于element-ui封裝可搜索的懶加載tree組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要為大家詳細(xì)介紹了Vue圖片放大鏡組件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08