在学习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. postgresql+mybatis返回值是数据库字段名

    mybatis 返回map的时候是下划线 role_id, user_id 两种解决方法 1.重命名 postgresql不支持驼峰 加上双引号重命名  SELECT role_id "ro ...

  2. Powerdesigner+Execel

    1.将Powerdesigner中的表(PDM)导入到execel中 Ctrl+Shift+X/tool->Execute commands ->Edit/Run script 粘贴如下v ...

  3. android项目红色感叹号

    Project --> Clean 清理一下,一般要注意的,如果是你的项目文件有错误,特别是xml文件,清理后那个R资源文件会不见的,那就需要你把错误修正后自动生成的.

  4. Oracle database

    //下面这个通常直选择TCP就好了 此处的全局数据库根据实际情况来确定,如果是第一次,要和第一次一致.(见上面的图中的全局数据库) //这个可以使  计算机名(计算机—>属性).也可以是ip地址 ...

  5. div流加载

    var hasNext=true;//触发开关,防止多次调用事件 var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度) var nScrollTop = 0; //滚动 ...

  6. 使用异步方法在XAML中绑定系统时间

    最近的工作需要在程序界面上显示实时的系统时间,网上查了查大部分都是用Timer或者线程来实现. 个人非常不喜欢用Timer,感觉这东西有点太耗资源,然后思考了下觉得更好的方法应该是使用异步的方法在委托 ...

  7. js_1_变量类型

    js中有哪些变量类型? 数字(包括int和float),字符串,数组(字典,js没有字典类型,把字典看成一个对象) 如何把字符转成数字呢? obj.parseInt()         //  转化成 ...

  8. C/C++基础知识总结

    [006] HIWORD宏取高16位. [005] 使用strcmp需判断参数是否为NULL [004] main函数的第三个参数envp 有的编译器支持三个参数的main函数,但不推荐这么写. [0 ...

  9. MyCat 入门:漫谈 MyCat 配置系统

    文章首发于[博客园-陈树义],点击跳转到原文<MyCat 入门:漫谈 MyCat 配置系统> 上篇文章<MyCat 启蒙:分布式系统的数据库架构演变>中,我们通过一个项目从零到 ...

  10. Android图像数据传递到C++的一些坑

    最近在做一个Android图象识别的app, 通过相机预览或者是拍照功能获取图像数据,然后将图像数据传递到本地C++的图像识别so库.在这个过程中花的时间最多的就是数据传输问题.谨以此坑,警示未来!  ...