原创~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 ...
随机推荐
- PHP move_uploaded_file() 函数
PHP Filesystem 函数 定义和用法 move_uploaded_file() 函数将上传的文件移动到新位置. 若成功,则返回 true,否则返回 false. 语法 move_upload ...
- ajax_表单提交+tp5ajax
======================================================= 判断squery导入的是否正确? $(function(){ alert('1'); } ...
- vue学习笔记(二)——简单的介绍以及安装
学习编程需要的是 API+不断地练习^_^ Vue官网:https://cn.vuejs.org/ 菜鸟教程:http://www.runoob.com/vue2/vue-tutorial.html ...
- java.lang.NoClassDefFoundError: javax/mail/Authenticator
摘录自:http://stackoverflow.com/questions/1630002/java-lang-noclassdeffounderror-javax-mail-authenticat ...
- myeclipse 10怎么安装与激活
http://jingyan.baidu.com/article/5553fa82eae0ce65a2393406.html
- linkin大话面向对象--抽象类
abstract [非private访问修饰符] 返回值类型 方法名称(参数列表); 当编写一个类时,我们往往会为该类定义一些方法,这些方法时用来描述该类的行为方式,那么这些方法都有具体的方法体. 但 ...
- 华人开创NTP网络授时服务器成功投运世界级超大工程港珠澳大桥
华人开创NTP网络授时服务器成功投运世界级超大工程港珠澳大桥 本文由北京华人开创公司提供请勿转载 2017年12月中旬,我华人开创生产研发的NTP网络授时服务器成功投运世界级超大工程港珠澳大桥,为这个 ...
- java 表现层:jsp、freemarker、velocity
在java领域,表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术 优点: 1.功能强大,可以写java代码 2.支持jsp标签(jsp tag) 3.支 ...
- javascript 中的console.log有什么作用啊?
相比alert他的优点是: 他能看到结构话的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容. console不会打断你页面的操作,如果用al ...
- 【转】GLONASS全球卫星导航系统
GLONASS是“GLOBAL NAVIGATION SATELLITE SYSTE(全球卫星导航系统)”的缩写,作用类似于美国的GPS.欧洲的伽利略卫星定位系统.最早开发于苏联时期,后由俄罗斯继续该 ...