在学习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">

原因:

 router-link会阻止click,mouseover事件,只用click不用native,事件不会触发。 
此时,应该给click和mouseover加上native

根据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添加点击事件的更多相关文章

  1. vue router-link 上添加点击事件

    在vue学习中遇到给router-link 标签添加事件@click .@mouseover等无效的情况 我想要做的是鼠标移上去出现删除标签,移除标签消失的效果 原代码: <router-lin ...

  2. [Swift通天遁地]一、超级工具-(1)动态标签:给UILabel文字中的Flag和url添加点击事件

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. jquery:为动态加载的元素添加点击事件

    jquery:为动态加载的元素添加点击事件 最近在做项目的时候遇到了这样一个问题,给用ajax动态加载出来的内容添加点击事件,但是怎么都触发不了,经过查询试验总结出正确的写法 在jquery1.7之前 ...

  4. iOS开发小技巧 - label中的文字添加点击事件

    Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...

  5. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  6. echart字符云之添加点击事件

    // 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...

  7. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  8. 继承UIView的子控件添加点击事件

    UITapGestureRecognizer*tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@select ...

  9. 如何在UILable上添加点击事件?

    最近开始学习iOS开发,今天上来写第一个iOS笔记 昨天碰到一个需求,在UILable上添加点击事件,网上找了写资料,有人建议用透明的UIButton覆盖,有人建议写一个集成自UILable的类,扩展 ...

  10. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...

随机推荐

  1. Asp.net mvc 中Action 方法的执行(二)

    [toc] 前面介绍了 Action 执行过程中的几个基本的组件,这里介绍 Action 方法的参数绑定. 数据来源 为 Action 方法提供参数绑定的原始数据来源于当前的 Http 请求,可能包含 ...

  2. ADO.NET复习总结(6)-断开式数据操作

    一.基础知识 主要类及成员(和数据库无关的)(1)类DataSet:数据集,对应着库,属性Tables表示所有的表(2)类DataTable:数据表,对应着表,属性Rows表示所有的行(3)类Data ...

  3. 使用 EclEmma 进行覆盖测试

    开源软件测试工具 EclEmma,它能够对由 Java 语言编写的程序进行覆盖测试,从而对程序运行的结果生成详尽的覆盖测试报告. UT-Junit 安装 EclEmma 插件 安装 EclEmma 插 ...

  4. Java 几种动态代理实现及其性能比较

    原处出之于阿里liangf Interface: package com.sunchao.jdkdyproxy; public interface Subject { void request(); ...

  5. 深入剖析Java编程中的中文问题及建议最优解决方法

    摘录自:http://fafeng.blogbus.com/logs/3062998.html http://www.blogbus.com/fafeng-logs/3063006.html 深入剖析 ...

  6. linux libpcap的性能问题,请大家注意绕行。

    内核代码中,ip_rcv是ip层收包的主入口函数,该函数由软中断调用.存放数据包的sk_buff结构包含有目的地ip和端口信息,此时ip层进行检查,如果目的地ip不是本机,且没有开启转发的话,则将包丢 ...

  7. 记一些安卓app反编译修改的记录

    2017-12-2209:00:40 好几天没有写过博客了,因为马上要期末考试,只能暂且放下我的小玩物,专心复习我的期末考试. 今天突然想设置一个安卓的栏目,记录下自己从高中就爱玩的一些东西,像刷机呀 ...

  8. ZooKeeper对比Eureka

    刚开始看到Eureka这个单词的时候真心不会念,查了后发现他有一个好听的名字,来,大家一起念 [ jʊ'rikə ] 简介 Eureka本身是Netflix开源的一款提供服务注册和发现的产品,并且提供 ...

  9. python3 第十一章 - 数据类型之str(字符串)

    字符串是 Python 中最常用的数据类型,我们可以使用引号 ' 或 " 来创建字符串,例如: name = 'roy' sex = "男" 1.访问字符串中的值 Pyt ...

  10. char (*p)[]和char *p[]的区别

    理解的关键在于: 1. []的优先级高于*,(*p)[]理解为指向一个数组,*(p[])存放指针的数组 2. char (*p)[SIZE]:指向一维数组的指针,一维数组只能有SIZE个元素 char ...