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 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
实现vuex原理的示例
Oct 21 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
php adodb操作mysql数据库
2009/03/19 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Linux系统下PHP-FPM的安装和配置教程
2015/08/17 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jQuery Ajax页面局部加载方法汇总
2016/06/02 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
详解JS对象封装的常用方式
2016/12/30 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
JS实现留言板功能
2017/06/17 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
python实现的简单文本类游戏实例
2015/04/28 Python
python获取一组汉字拼音首字母的方法
2015/07/01 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python基本语法练习实例
2017/09/19 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python中的Cookie模块如何使用
2020/06/04 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
python元组拆包实现方法
2021/02/28 Python
韩国邮政旗下生鲜食品网上超市:epost
2016/08/27 全球购物
节水口号标语
2014/06/19 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
教师听课学习心得体会
2016/01/15 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android