在学习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. servlet入门学习之Web容器

    一.web服务器 web服务器(程序/软件) 即:www服务器或http服务器.提供Web信息浏览服务.它只需支持HTTP协议.HTML文档格式及URL.向浏览器提供服务的程序. 1.Web服务器是指 ...

  2. MySQL zip解压版安装过程及问题

    1.首先解压mysql压缩包,然后添加环境变量path(D:\mysql-5.7.11\bin) 2.修改D:\mysql-5.7.11\my-default.ini​ 文件的配置项 ​        ...

  3. TF-卷积函数 tf.nn.conv2d 介绍

    转自 http://www.cnblogs.com/welhzh/p/6607581.html 下面是这位博主自己的翻译加上测试心得 tf.nn.conv2d是TensorFlow里面实现卷积的函数, ...

  4. python_怎么格式化字符串?

    案例: 如何对下面字典的key左对齐 {'dhqbl': 30, 'psfgj': 40, 'ontpqsb': 90, 'mrean': 110, 'klespjtr': 60, 'lprnkqhb ...

  5. Java8内存模型—永久代(PermGen)和元空间(Metaspace)(转)

    Java8内存模型—永久代(PermGen)和元空间(Metaspace) 查看原文点击传送门:http://www.cnblogs.com/paddix/p/5309550.html 提示:本文做了 ...

  6. MySql全文索引

    使用索引是数据库性能优化的必备技能之一.在MySQL数据库中,有四种索引:聚集索引(主键索引).普通索引.唯一索引以及我们这里将要介绍的全文索引(FULLTEXT INDEX). 全文索引(也称全文检 ...

  7. Zabbix-3.2.4实现微信(WeChat)告警

    摘自abcdocker网站 原文地址:https://www.abcdocker.com/abcdocker/2472 Zabbix可以通过多种方式把告警信息发送到指定人,常用的有邮件,短信报警方式, ...

  8. 第三方模块paramiko的使用

    "Paramiko" is a combination of the Esperanto words for "paranoid" and "frie ...

  9. 5分钟编写运行一个RChain合约

    今天介绍如何编写和测试一个RChain智能合约,Rholang的语法介绍在https://developer.rchain.coop/tutorial 1.安装docker 这个自己百度一下,安装都是 ...

  10. 05_Linux网络配置及CRT远程

    占位占位占位占位占位占位占位占位