vue elementui el-dropdown-item设置@click无效的解决方案

如图,直接在el-dropdown-item上面设置@click,相应的method并没有被触发,查找资料发现需要在它的上级 el-dropdown 处使用 @command 方法触发。

【template】

<el-dropdown placement="bottom-end" @command="handleCommand">
  <el-button type="text"><i class="el-icon-more"></i></el-button>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="option1">Option1</el-dropdown-item>
    <el-dropdown-item command="option2">Option2</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

【methods】

handleCommand(command){
  if(command === 'option1') {
    this.visible1 = true
  }      
  if(command === 'option2') {
    this.visible2 = true
  }      
},

【参考文章】

使用element-UI的el-dropdown时绑定@click,click事件不触发。_el dropdown click-CSDN博客

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

flinkOnYarn并配置prometheus+grafana监控告警

flinkOnYarn并配置prometheusgrafana监控告警 一、相关服务版本&#xff1a; flink版本&#xff1a;1.17.2 pushgateway版本&#xff1a;1.10.0 prometheus版本&#xff1a;3.0.0 grafana-v11.3.0参考了网上的多个文档以及学习某硅谷的视频&#xff0c;总结了一下文档&#x…

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本v9版

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本 Shell脚本源码地址&#xff1a; Gitee&#xff1a;https://gitee.com/raymond9/shell Github&#xff1a;https://github.com/raymond999999/shell脚本可以去上面的Gitee或Github代码仓库拉取。 支持的功能和系统&am…

一文1800字使用Jmeter进行http接口性能测试!

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 为什么要做接口测试&#xff1f; 越底层发现b…

当使用key-value方式进行参数传递时,若key对应的是一个对象或数组结构,如何利用API Post工具进行模拟操作。

1. 后端服务代码如下 RequestMapping("/handle11")public Person handle11(Person person){System.out.println(person);return person;} 2. 后端入参结构 person是一个对象&#xff0c;对象结构如下&#xff1a; public class Person {private String username …

Pytorch学习--神经网络--完整的模型验证套路

一、选取的图片 全部代码依托于该博客 二、代码&#xff08;调用训练好的模型&#xff09; import torch import torchvision from PIL import Image from model import *img_path "dog.png" image Image.open(img_path)print(image.size)transform torchvisi…

PMP--一、二、三模--分类--变更

文章目录 技巧考试中的三大项目流程一 、变更流程 高频考点分析&#xff08;一、过程&#xff1b;二、人员&#xff09;一、过程&#xff1a;1.1 变更管理&#xff1a;1.1.1 瀑布型变更&#xff08;一次交付、尽量限制、确定性需求 &#xff1e;风险储备&#xff09;1.1.2 敏捷…

c语言选择排序

选择排序思想&#xff1a; 反复地从未排序部分选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序部分的末尾&#xff1b; 首先用一个变量min来保存数组第一个元素的下标&#xff0c;然后用这个下标访问这个元素&#xff0c;将这个元素与它后面的元素相…

基于SpringBoot的“原创歌曲分享平台”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“原创歌曲分享平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 平台功能结构图 平台首页界面图 用户注册界面…

JMeter项目实战

目录 一、流程&#xff1a; 1.接口测试流程&#xff1a; 2.测试数据准备&#xff1a; 3.接口功能测试&#xff1a; 4.自动化测试流程&#xff1a; 5.情景压力测试分析&#xff1a; 6.生成图形化测试报告&#xff1a; 一、流程&#xff1a; 1.接口测试流程&#xff1a; …

杨中科 .Net Core 笔记 DI 依赖注入2

ServiceCollection services new ServiceCollection();//定义一个承放服务的集合 services.AddScoped<iGetRole, GetRole>();using (ServiceProvider serviceProvider services.BuildServiceProvider()) {var list serviceProvider.GetServices(typeof(iGetRole));//获…

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…

Window.history API学习笔记

Window.history API学习笔记 在现代前端开发中&#xff0c;单页应用&#xff08;SPA&#xff09;的流行让我们对于页面的浏览历史管理需求愈加明显。window.history API作为浏览器提供的原生API&#xff0c;能够帮助开发者更加细致地控制用户的导航体验。本文将介绍window.his…

Hbase集群搭建

1. 环境 三台节点hadoop 集群zookeeper 集群hbase 1.1环境准备 使用前文hdfs三台节点 1.11 zookeeper搭建 下载 wget https://dlcdn.apache.org/zookeeper/zookeeper-3.8.4/apache-zookeeper-3.8.4-bin.tar.gz解压 tar -zxvf apache-zookeeper-3.8.4-bin.tar.gz zookee…

物联网(RFID)全景:被装信息化监控应用与挑战

一、被装物联网信息化建设的动因 信息化改革在20世纪80年代中期启航&#xff0c;旨在提升被装保障的效率。随着时间的推移&#xff0c;硬件的广泛运用和软件的快速迭代&#xff0c;装备业务在规划、制造、分发以及战时支援等核心环节&#xff0c;已经与信息系统深度融合&#x…

2024 年 10 月公链行业研报:比特币引领市场,Layer 2 竞争加剧

作者&#xff1a;Stella L (stellafootprint.network) 数据来源&#xff1a;Footprint Analytics 公链研究页面 在中本聪于 2008 年 10 月 31 日发布比特币白皮书整整 16 年后&#xff0c;比特币再次展现了其对金融世界的革命性影响。2024 年 10 月&#xff0c;在机构投资者…

NCC前端调用查询弹框

系统自带的查询模板 弹框 调启使用默认的 查询模板 是在 单据模板的 列表模板中&#xff0c;有个查询区域 &#xff0c;查询区域就是查询模板内容如果在列表页做客开 新增按钮 调启查询模板 无问题&#xff0c;但是目前需求是需要再卡片页面下调启系统标准的调启模板代码 //调…

网络安全常见面试题--含答案

本文面试题汇总&#xff1a; 防范常见的 Web 攻击 重要协议分布层 arp协议的工作原理rip协议是什么&#xff1f;rip的工作原理 什么是RARP&#xff1f;工作原理OSPF协议&#xff1f;OSPF的工作原理 TCP与UDP区别总结 什么是三次握手四次挥手&#xff1f; tcp为什么要三次握手&…

Vue 3 在现代前端开发中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Vue 3 在现代前端开发中的应用 Vue 3 在现代前端开发中的应用 Vue 3 在现代前端开发中的应用 引言 Vue 3 概述 定义与原理 发展历…

Python 正则表达式使用指南

Python 正则表达式使用指南 正则表达式&#xff08;Regular Expression, 简称 regex&#xff09;是处理字符串和文本的强大工具。它使用特定的语法定义一组规则&#xff0c;通过这些规则可以对文本进行匹配、查找、替换等操作。Python 提供了 re 模块&#xff0c;使得正则表达…

OpenGL Phong光照模型-镜面反射-反射方向推导

反射方向计算公式如下&#xff1a; 其中R表示反射方向&#xff0c;L表示入射方向&#xff0c;N表示法向&#xff08;单位向量&#xff09;。 该公式推导如下&#xff1a; 1、首先入射方向、反射方向向量可分成两个分量分别是&#xff1a; 与法向N平行分量Ln、垂直于法向N分量…