vue select 获取value和lable操作
更新时间：2020年08月28日 08:41:09 作者：Kelly—zxy
这篇文章主要介绍了vue select 获取value和lable操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
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操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目实现一键网站换肤效果实例(webpack-theme-color-replacer的使用)
换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效,下面这篇文章主要给大家介绍了关于vue项目实现一键网站换肤效果的相关资料,文中主要介绍的是webpack-theme-color-replacer的使用,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue自定义指令详解,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了详解Vue中组件传值的多重实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue实现中部导航栏布局功能，本文图文并茂，代码实例相结合介绍的非常详细，需要的朋友参考下吧2019-07-07
vue@cli3项目模板怎么使用public目录下的静态文件
这篇文章主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在我们前端日常开发中经常会遇到判断一个字符串中是否包含某个元素的需求,下面这篇文章主要给大家介绍了关于Vue判断字符串(或数组)中是否包含某个元素的多种方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了Vue el-table实现右键菜单功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
如何将iconfont图标引入到vant的Tabbar标签栏里边
这篇文章主要介绍了如何将iconfont图标引入到vant的Tabbar标签栏里边，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
基于element-ui封装可搜索的懒加载tree组件的实现
这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家详细介绍了Vue图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
最新评论