原创~vue router-link添加点击事件
在学习vue中会遇到给router-link添加@click,@mouseover等事件
我想要做的是用v-for循环输出导航菜单,但是下面代码的@click事件和@mouseover并不会响应
<router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click="changeBgc(index)" @mouseover="changeBg(index)" class="topbar-item">
原因:
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native
修饰符。
所以如果在想要在router-link上添加事件的话需要@click.native这样写
修改后:
<router-link v-for="(item,index) in list" :key="item.value" :to="{path:item.path}" @click.native="changeBgc(index)" @mouseover.native="changeBg(index)" class="topbar-item">
原创~vue router-link添加点击事件的更多相关文章
- vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...
- [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- jquery:为动态加载的元素添加点击事件
jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- 【Swift 2.1】为 UIView 添加点击事件和点击效果
前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...
- echart字符云之添加点击事件
// 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- 继承UIView的子控件添加点击事件
UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...
- 如何在UILable上添加点击事件?
最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...
- jquery无法为动态生成的元素添加点击事件的解决方法
遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...
随机推荐
- servlet入门学习之Web容器
一.web服务器 web服务器(程序/软件) 即:www服务器或http服务器.提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.向浏览器提供服务的程序. 1.Web服务器是指 ...
- MySQL zip解压版安装过程及问题
1.首先解压mysql压缩包,然后添加环境变量path(D:\mysql-5.7.11\bin) 2.修改D:\mysql-5.7.11\my-default.ini 文件的配置项 ...
- TF-卷积函数 tf.nn.conv2d 介绍
转自 http://www.cnblogs.com/welhzh/p/6607581.html 下面是这位博主自己的翻译加上测试心得 tf.nn.conv2d是TensorFlow里面实现卷积的函数, ...
- python_怎么格式化字符串?
案例: 如何对下面字典的key左对齐 {'dhqbl': 30, 'psfgj': 40, 'ontpqsb': 90, 'mrean': 110, 'klespjtr': 60, 'lprnkqhb ...
- Java8内存模型—永久代(PermGen)和元空间(Metaspace)(转)
Java8内存模型—永久代(PermGen)和元空间(Metaspace) 查看原文点击传送门:http://www.cnblogs.com/paddix/p/5309550.html 提示:本文做了 ...
- MySql全文索引
使用索引是数据库性能优化的必备技能之一.在MySQL数据库中,有四种索引:聚集索引(主键索引).普通索引.唯一索引以及我们这里将要介绍的全文索引(FULLTEXT INDEX). 全文索引(也称全文检 ...
- Zabbix-3.2.4实现微信(WeChat)告警
摘自abcdocker网站 原文地址:https://www.abcdocker.com/abcdocker/2472 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式, ...
- 第三方模块paramiko的使用
"Paramiko" is a combination of the Esperanto words for "paranoid" and "frie ...
- 5分钟编写运行一个RChain合约
今天介绍如何编写和测试一个RChain智能合约,Rholang的语法介绍在https://developer.rchain.coop/tutorial 1.安装docker 这个自己百度一下,安装都是 ...
- 05_Linux网络配置及CRT远程
占位占位占位占位占位占位占位占位