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 相关文章推荐
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
微信小程序实现发红包功能
Jul 11 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
使用Javascript简单计算器
Nov 17 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
实现vuex原理的示例
Oct 21 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实现的MySQL数据浏览器
2007/03/11 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
Ext 表单布局实例代码
2009/04/30 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
2018/01/02 Javascript
express 项目分层实践详解
2018/12/10 Javascript
详解使用WebPack搭建React开发环境
2019/08/06 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
基于python 字符编码的理解
2017/09/02 Python
Python发展简史 Python来历
2019/05/14 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Python ATM功能实现代码实例
2020/03/19 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
英国户外装备和冒险服装零售商:alloutdoor
2018/01/30 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
Vrbo英国:预订度假屋
2020/08/19 全球购物
如何选择使用结构还是类
2014/05/30 面试题
UNIX文件系统分类
2014/11/11 面试题
社区七一党员活动方案
2014/01/25 职场文书
副总经理任命书
2014/06/05 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
雨中的树观后感
2015/06/03 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Java 多线程并发FutureTask
2022/06/28 Java/Android