vue中设置子组件的点击事件不影响父组件的点击事件

37ea361c882fe6330cebad5bc97e6f7a.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

今天分享个技术块儿。

在做项目的过程中,遇到了个问题,简单的描述一下:有一个card卡片,上面绑定了个点击事件,点击card卡片,就会展示详细信息。

这个很简单,通过设置:visible.sync的属性值即可,如果等于true,则弹出模态框,否则不弹出。

b76d22bcc7cf122970e22a117b5f344e.png
image-20211022182716991

橙色的就是小卡片,点击弹出该模板的详细信息。

但是现在有这样的一个需求,在小卡片上添加了个垃圾桶图标,点击图标,删除该模板信息。在操作的时候会出现这样的bug,点击垃圾桶会触发垃圾桶的点击事件,但是也会触发小卡片的点击事件,如何才能点击垃圾桶时不影响小卡片的点击事件呢?

经过在网上搜索,最后发现垃圾桶的点击事件可以这样写。

<i class="el-icon-delete" @click.stop="delGroupByTimechuo(itemAction.group.timechuo)"></i>

重点在@click.stop代码上,不加.stop的话,就会触发小卡片的点击事件,加上之后只触发当前垃圾桶图标的点击事件。

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

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

相关文章

一个还算简单的微信消息SDK(基于.Net Standard 2.0)

虽然微信公众号出现了好久&#xff0c;不过在SDK这件事情上感觉并没有多少人把它当成一个有技术含量的事情来做&#xff0c;很多SDK做的事情就是一个代码的堆叠&#xff0c;当然也可能写的好的并没有开源出来。所以在某个翻遍github而无所获的下午我写了一个基础的基于事件的微…

汇编语言(二十八)之统计单词

输入一行字符串&#xff0c;统计单词SUN出现的个数 程序运行&#xff1a; 代码&#xff1a; datas segmentENG_max_length db 0ffhENG_length db 0ENG db 100h dup(?)eng_len dw 0SUN db SUNsun_len dw $-SUNcount dw 0…

POJ3190,P2859-Stall Reservations(摊位预订)【贪心,堆】

正题 POJ题目链接&#xff1a;http://poj.org/problem?id3190 luogu评测记录&#xff1a;https://www.luogu.org/recordnew/lists?uid52918&pidP2859 题目大意 有n头牛&#xff0c;给出每头牛的挤奶时间&#xff08;开始和结束时间&#xff09;&#xff0c;一个棚只能…

这可能就是写代码的乐趣吧,你,也一定会爱上写代码的!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”现在是&#xff1a;2021年10月23日22:02:41。于我来说&#xff0c;最感兴趣的莫过于上课和写代码了。最近一下在做一个项目&#xff0c;可能是前期数据库设计的不是很好&#xff0c;导…

汇编语言(二十九)之数值的二进制和十进制

给定一个数&#xff0c;输出该数的二进制和十进制数 程序运行&#xff1a; 代码&#xff1a; datas segmentVAL1 dw 156datas endsstacks segment stackdb 100h dup(?)stacks endscodes segmentassume cs:codes,ds:datas,ss:stacks BANDO proc far start:push dsmov ax,0…

ASP.NET Core MVC – Tag Helper 组件

ASP.NET Core Tag Helpers系列目录&#xff0c;这是第五篇&#xff0c;共五篇&#xff1a; ASP.NET Core MVC – Tag Helpers 介绍ASP.NET Core MVC – Caching Tag HelpersASP.NET Core MVC – Form Tag HelpersASP.NET Core MVC – 自定义 Tag HelpersASP.NET Core MVC – T…

ArrayList如何对某个对象的日期属性排序?

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂 现实是&#xff1a;2021年10月24日09:52:35&#xff0c;祝大家节日快乐呐&#xff01; 今天在项目过程中&#xff0c;遇到了个需求&#xff0c;需要对某个对象中的日期部分进行排序&#xf…

P3651-展翅翱翔之时【贪心,环套树】

正题 评测记录&#xff1a;https://www.luogu.org/recordnew/lists?uid52918&pidP3651 题目大意 有n个点&#xff0c;有n条有向边&#xff0c;改变每一个点的出边需要价值不同&#xff0c;求最小价值使所以边的头尾都可以相互到达。 解题思路 首先我们可以找出所以的环…

汇编语言(三十)之多模块求和

多文件模块编译&#xff0c;数组求和 程序运行&#xff1a; 暂无 代码&#xff1a; 模块一 extern PROADD:fardatas segmentarray dw 1,2,3,4,5,7,8,7,4,3array_len dw ($-array)/2sum dw 0 table dw 3 dup(?) datas endsstacks segment stackd…

vue+elementui中,el-select多选下拉列表中,如何同时获取:value和:label的值?

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 项目场景&#xff1a; 正如题目所说&#xff0c;今天在项目过程中遇到了个需求&#xff0c;因为需要在前台展示运动员的名称&#xff0c;但是运动员的编号在别的地方还需要使用&#xff…

hdu4699-Editor【对顶栈】

正题 题目链接&#xff1a;http://acm.hdu.edu.cn/showproblem.php?pid4699 大意 有5种操作 1.在光标处写入一个数字 2.在光标处删除一个数字 3.4.将光标往 左/右 移动 5.询问一个位置(光标前)之前的最大前缀和 解题思路 我们开两个栈&#xff0c;一个是存光标前&#x…

C#使用Xamarin开发可移植移动应用进阶篇(9.混淆代码,防止反编译)

嗯,既然是客户端应用,自然而然就需要一些防止源码泄漏的手段.通过C#编写的APP,完全是可以直接解压APK,然后得到里面的DLL然后进行反编译的.. 如下图: 嗯..这样就会造成代码泄漏.. 下面就介绍一下,如何使用VS自带的Dotfuscator来进行混淆代码. 1.安装Dotfuscator 打开VS2017…

想绝交,就借钱!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”今天谈论的话题只有两个字&#xff0c;就是“钱”之前在原来单位工作的时候&#xff0c;老板就给我说&#xff0c;我弟弟的工资让我帮忙管着&#xff0c;不然到用的时候拿不出来&#…

luoguSP1805,POJ2559-Largest Rectangle in a Histogram【单调栈】

正题 POJ题目链接:http://poj.org/problem?id2559 luogu评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidSP1805 大意 有n个高度不同&#xff0c;宽度为1的长方形排列在一起。找到一个长方形使其面积最大 解题思路 我们先考虑单调递增的情况 …

Orleans解决并发之痛(一):单线程

程序在运行过程中有时会莫名其妙出现代码的某些约束或者执行结果和理想状况不一样&#xff0c;正常逻辑怎么会出现这样的情况&#xff1f;到底发生了什么&#xff1f;好像见了鬼&#xff01;瞬间好无助。 谁来救救我 大多数出现正常逻辑很难解释的时候&#xff0c;我们可能会想…

你们考试,我们都有点紧张呢…

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”考试计划都好久好久了&#xff0c;一直没有时间&#xff0c;终于在今天考了一次。去监考的时候王老师还说&#xff0c;我都有点紧张呢&#xff0c;我说我也是&#xff0c;哈哈哈~上午几…

P2947-[USACO09MAR]向右看齐Look Up【单调栈】

正题 评测记录:https://www.luogu.org/recordnew/lists?uid52918&pidP2947 题目大意 有n头牛&#xff0c;高度不同&#xff0c;求每头牛右边第一头比他高的人。 解题思路 考虑单调栈&#xff0c;每次如果是比栈顶矮的就加入栈&#xff0c;如果是高的就将栈弹出直到比其…

汇编语言(三十一)之数字字符串加密与解密

输入一串数字&#xff0c;然后进行加密解密输出 程序运行&#xff1a; 代码&#xff1a; datas segmentline_max_len db 0ffh line db 0, 100h dup(?)linesecret db 0, 100h dup(?)linedesecret db 0, 100h dup(?)secret …

ASP.NET Core 运行原理解剖[1]:Hosting

SP.NET Core 是新一代的 ASP.NET&#xff0c;第一次出现时代号为 ASP.NET vNext&#xff0c;后来命名为ASP.NET 5&#xff0c;随着它的完善与成熟&#xff0c;最终命名为 ASP.NET Core&#xff0c;表明它不是 ASP.NET 的升级&#xff0c;而是一个重新设计的Web开发框架。而它一…

公众号文章

大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。 常用的几个sql整理 1.按照日期统计今天的客流信息。 SELECT * FROM base_disanfang WHERE DATE_FORMAT(create_time,%Y-%m-%d) DATE_FORMAT(NOW(),%Y-%m-%d) 其中base_disanfang为表名…