在学习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. ios 积累

    1.加号 是可以通过类名直接调用这个方法,而减号则要实例化逸个对象,然后通过实例化的对象来调用该方法!! 2.(返回类型) 方法名 :(参数类型)变量名 空格 参数二名 :(参数类型) 变量名 空格 ...

  2. Java线程-异常处理

    在Java多线程程序中,所有线程都不允许抛出未捕获的checked exception,也就是说各个线程需要自己把自己的checked exception处理掉.这一点是通过java.lang.Run ...

  3. python_如何获取文件状态

    案例: 在某项目中,需要获取文件状态,如: 文件的类型(普通文件.目录.符合连接.设备文件) 文件的访问权限 文件最后 访问.修改.节点状态 时间 普通文件大小 -- 如何解决? 方法1:通过os原始 ...

  4. eclipse-java开发实用快捷键

    Expand All:ctrl+小键盘* Collapse All:ctrl+shift+小键盘/

  5. 数据仓库搭建——Inmon与Kimball

    一.简介 1.1 历史 搞数据仓库这么久,实践中发现首先搭建数据集市,还是清洗数据之后,直接进入数据立方体(形成维度表和实施表)形成核心数据仓库层,是个选择题... 随后发现这其实涉及到了数据仓库的历 ...

  6. WebService初入

    WebService 1. WebService基本认识 WebService最早是微软提出了一种以XML为载体网络信息传输的规范,现在几乎所有的语言与平台都支持,带有状态机制,不依赖于容器,可以发送 ...

  7. 05_Javascript进阶第一天

    内部私有函数 function a(){ alert('aaa'); return function b(){ alert('bbb'); } } //调用内部私有函数b,方法1 var func=a ...

  8. 锐捷配置telnet

    .组网需求 通过Telnet功能远程登录管理设备.   二.组网拓扑   三.配置要点 1.需要给交换机配置一个管理IP,如果PC与交换机不是同一个网段,需要给交换机配置一个默认网关 2.需要配置一个 ...

  9. PHP定义字符串的四种方式

    1.简介 在PHP中这门语言中,因为是弱类型语言,因此使用变量时不需提前定义即可使用. 我们在使用php进行开发的时候,大多数使用双引号.单引号进行定义字符串.既然有这两种方式,那么他们之间肯定是有区 ...

  10. 全部用startssl生成的证书,配置Apache使其支持SSL

    Apache的编译安装见这篇: http://www.cnblogs.com/yjken/p/3921840.html 网上查阅了一大批资料,得知自己生成的证书是会被浏览器提示“证书不安全”的,我也就 ...