element ui - el-select获取点击项的整个对象item

 1.背景

在使用 el-select 的时候,经常会通过 change 事件来获取当前绑定的 value ,即对象中默认的某个 value 值。但在某些特殊情况下,如果想要获取的是点击项的整个对象 item,该怎么做呢?

2.实例 

elementUI 中是可以支持获取点击项的整个对象的。

需注意  value-key="id" :value="item"

<template><el-selectv-model="value"multiplev-model="obj" value-key="id" @change="change"><el-optionv-for="item in options":key="item.value":label="item.label":value="item"></el-option></el-select>
</template><script>export default {data() {return {value:'',options: [{id: 1,label: '黄金糕'}, {id: 2,label: '双皮奶'}, {id: 3,label: '蚵仔煎'}, {id: 4,label: '龙须面'}, {id: 5,label: '北京烤鸭'}],value1: [],value2: []}},methods: {change(item) {console.log(item);// 打印整个对象}}}
</script>

延伸:

vue.runtime.esm.js:619 [Vue warn]: <transition-group> children must be keyed: <ElTag> 

 在选择点击获取某个值是,“未选中”,原因为:value-key="id" id的值为数值类型

value-key="''+id" 将数值类型转换为字符串类型即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/105057.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java“牵手”快手商品详情数据,根据商品ID获取快手商品详情数据接口,快手API接口申请指南

快手小店怎么查看宝贝详情 快手小店作为快手平台上的一个电商服务&#xff0c;让很多卖家可以方便地在快手上开设店铺&#xff0c;销售自己的商品。如果你是快手小店的卖家&#xff0c;你可能会想知道如何查看自己的宝贝详情&#xff0c;以便更好地管理自己的店铺。下面就让我…

调查问卷平台哪家好?

在如今的数字化时代&#xff0c;问卷调查已成为企业和组织了解顾客需求、员工满意度以及市场趋势的重要工具。然而&#xff0c;在众多的在线调查工具中&#xff0c;为什么我们要选择Zoho Survey&#xff1f; 一、强大的功能和灵活的问卷设计 1、多种问卷题型&#xff1a; Zo…

YOLOV1

YOU ONLY LOOK ONCE

jdk 04 stream的collect方法

01.收集(collect) collect&#xff0c;收集&#xff0c;可以说是内容最繁多、功能最丰富的部分了。 从字面上去理解&#xff0c;就是把一个流收集起来&#xff0c;最终可以是收集成一个值也可以收集成一个新的集合。 collect主要依赖java.util.stream.Collectors类内置的静态方…

面试之HTTP

1.HTTP与HTTPS的区别 HTTP运行在TCP之上&#xff1b;HTTPS是运行在SSL之上&#xff0c;SSL运行在TCP之上两者使用的端口不同&#xff1a;HTTP使用的是80端口&#xff0c;HTTPS使用的是443端口安全性不同&#xff1a;HTTP没有加密&#xff0c;安全性较差&#xff1b;HTTPS有加密…

vue 简单实验 自定义组件 传参数 props

1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"todo-list-app"><todo-item v-bind:todo"todo1"></todo-item> </div> <script> const ListR…

Linux虚拟机安装(Ubuntu 20)

最近这段时间使用VMWare安装了一下Ubuntu版本的Linux虚拟机&#xff0c;在这里记录一下安装时参考的文章以及需要注意的细节 参考链接&#xff1a; VMware虚拟机下安装Ubuntu20.04&#xff08;保姆级教程&#xff09; 一、安装VMWare 下载链接&#xff1a;VMware Workstatio…

Maven解析

目录 Maven的概念 Pom 项目坐标 仓库 Maven环境搭建 安装jdk 配置maven 配置本地仓库地址 配置阿里云 maven 镜像仓库&#xff0c;下载速度更快 在idea中配置maven ​编辑 pom中名词解释 Maven命令 Maven的概念 Maven 是 Apache 软件基金会的一个开源项目,是一个…

从头开始:将新项目上传至Git仓库的简易指南

无论您是一个经验丰富的开发者还是一个刚刚起步的新手&#xff0c;使用Git来管理您的项目是一个明智的选择。Git是一个强大的版本控制系统&#xff0c;它可以帮助您跟踪项目的变化、合并代码以及与团队成员协作。在本文中&#xff0c;我们将为您提供一步步的指南&#xff0c;教…

RTSP/Onvif视频服务器EasyNVR安防视频云服务平台出现崩溃并重启的情况解决方案

EasyNVR安防视频云服务平台的特点是基于RTSP/Onvif协议将前端设备统一接入&#xff0c;在平台进行转码、直播、处理及分发&#xff0c;在安防监控场景中&#xff0c;EasyNVR可实现实时监控、云端录像、云存储、告警、级联等视频能力&#xff0c;极大满足行业的视频监控需求。 有…

【AI】即使AI 时代,程序员也无需焦虑

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前学习C/C、算法、Python、Java等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&…

数组分割(2023省蓝桥杯)n种讨论 JAVA

目录 1、题目描述&#xff1a;2、前言&#xff1a;3、动态规划&#xff08;bug)&#xff1a;3、递归 剪枝&#xff08;超时&#xff09;&#xff1a;4、数学&#xff08;正解&#xff09;&#xff1a; 1、题目描述&#xff1a; 小蓝有一个长度为 N 的数组 A [A0, A1,…, AN−…

c++ qt--页面布局(第五部分)

c qt–页面布局&#xff08;第五部分&#xff09; 一.页面布局 在设计页面的左侧一栏的组件中我们可以看到进行页面布局的一些组件 布局组件的使用 1.水平布局 使用&#xff1a;将别的组件拖到水平布局的组件中即可&#xff0c;可以选择是在哪个位置 2.垂直布局 使用&…

敏捷研发管理软件及敏捷管理流程

Scrum中非常强调公开、透明、直接有效的沟通&#xff0c;这也是“可视化的管理工具”在敏捷开发中如此重要的原因之一。通过“可视化的管理工具”让所有人直观的看到需求&#xff0c;故事&#xff0c;任务之间的流转状态&#xff0c;可以使团队成员更加快速适应敏捷开发流程。 …

RK3588平台开发系列讲解(AI 篇)RKNN-Toolkit2 模型的加载

文章目录 一、Caffe模型加载接口二、TensorFlow模型加载接口三、TensorFlowLite模型加载接口四、ONNX模型加载五、ONNX模型加载六、PyTorch模型加载接口沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 RKNN-Toolkit2 目前支持 Caffe、TensorFlow、TensorFlowLite、ONN…

互联网医院成品功能你有哪些看法?

随着信息化的飞速发展&#xff0c;医疗领域信息化程度日益加深&#xff0c;医院对于信息化的自身需求越来越高&#xff0c;由此也推动了医院信息化的快速发展。而即时医疗信息服务能够解决普通老百姓医疗信息匮乏、花大钱看小病、就医不及时等基本问题。通过智能手机、平板电脑…

C++信息学奥赛1130:找第一个只出现一次的字符

这段代码的功能是找出输入字符串中第一个重复出现的字符&#xff0c;并输出该字符。 解析注释后的代码如下&#xff1a; #include<bits/stdc.h> using namespace std; int main() {string arr;getline(cin, arr); int a0;for(int i0;i<arr.length();i){for(int j0;j…

lvs-dr模式+keepalived

一&#xff0c;keepalived概述 Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案&#xff0c;可以解决静态路由出现的单点故障问题。 在一个LVS服务集群中通常有主服务器&#xff08;MASTER&#xff09;和备份服务器&#xff08;BACKUP&#xff09;两种角色的服务器&am…

枚举和反射

枚举 枚举 枚举是一种特殊的类&#xff0c;它可以有自己的属性、方法和构造方法。 两种枚举的方法 自定义枚举 a.将构造器私有化&#xff0c;防止外部直接new b.去掉set方法&#xff0c;防止属性被修改 c.在内部直接创建固定的对象 通过类名直接去访问 关键字枚举 用…

聊聊敏捷实践的“个体与交互”

这是鼎叔的第七十二篇原创文章。行业大牛和刚毕业的小白&#xff0c;都可以进来聊聊。 欢迎关注本公众号《敏捷测试转型》&#xff0c;星标收藏&#xff0c;大量原创思考文章陆续推出。 敏捷宣言有重要的一句话&#xff1a;个体和交互胜过过程和工具。作为工程师&#xff0c;…