vue select 获取value和lable操作


Posted in Javascript onAugust 28, 2020

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代码

vue select 获取value和lable操作

在methods中:

vue select 获取value和lable操作

这样就可以精准的获取到啦,希望可以帮到你呀!

以上这篇vue select 获取value和lable操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
基于jquery的气泡提示效果
May 31 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
概述jQuery中的ajax方法
Dec 16 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
JS基于for语句编写的九九乘法表示例
Jan 04 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
Aug 27 #Javascript
js实现弹幕飞机效果
Aug 27 #Javascript
jQuery编写QQ简易聊天框
Aug 27 #jQuery
jQuery实现简单QQ聊天框
Aug 27 #jQuery
js实现前端界面导航栏下拉列表
Aug 27 #Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
Aug 27 #Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 #Javascript
You might like
php 函数使用方法与函数定义方法
2010/05/09 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
prototype 的说明 js类
2006/09/07 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript动态提示输入框输入字数的方法
2015/07/27 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
新入门node.js必须要知道的概念(必看篇)
2016/08/10 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
python web框架Flask实现图形验证码及验证码的动态刷新实例
2019/10/14 Python
就业推荐自我鉴定
2013/10/06 职场文书
村党支部换届选举方案
2014/05/02 职场文书
机电系毕业生求职信
2014/07/11 职场文书
医院党员公开承诺书
2014/08/30 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
私用公车造成事故检讨书
2014/11/16 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
安全生产先进个人总结
2015/02/15 职场文书
公司庆典主持词
2015/07/04 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书