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 相关文章推荐
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
May 08 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
Dec 12 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
小程序实现列表删除功能
Oct 30 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
谈谈JavaScript中的函数
Sep 08 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的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
php微信公众号开发模式详解
2016/11/28 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
深入浅析react native es6语法
2015/12/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
python操作 hbase 数据的方法
2016/12/18 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
Pytorch 抽取vgg各层并进行定制化处理的方法
2019/08/20 Python
python__name__原理及用法详解
2019/11/02 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
北大研究生linux应用求职信
2013/10/29 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
运动会通讯稿50字
2015/07/20 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript