vue router-link 添加点击事件

在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况

我想要做的是v-for遍历出来的选项卡，

鼠标移上去出现删除标签，移除标签消失的效果

原代码：

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag(index)" @mouseout="outTag(index)">{{item.listTitle}}<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

后在发现参考

https://segmentfault.com/q/1010000007896386

http://www.jianshu.com/p/0a8a89687bb6

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要这样写 ——>@click.native="FunctionName"

所以如果要事件有效的话，改成如下：

<router-link  v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover.native="overTag(index)" @mouseout.native="outTag(index)">{{item.listTitle}}<i class="contain_tab_close" v-show="selected==index"></i>
</router-link>

vue router-link 添加点击事件相关推荐

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
vue使用高德地图为信息窗体再添加点击事件
即使是用的vue,也不能使用@click为窗体添加点击事件,需要使用onclick,并且在定义了函数后,使用该函数还是会报函数未定义的错误,需要在window下添加该函数,点击时可以在原型链中找到该函 ...
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
iostext添加点击事件_iOS给UILabel添加点击事件
前言:笔者最近需要实现给UILabel中的链接添加点击事件的功能.使用so.com查了下,发现TTTAttributedLabel的封装程度比较好.整理了TTTAttributedLabel的基本使用 ...
vue中父元素点击事件与子元素点击事件冲突
vue中父元素点击事件与子元素点击事件冲突在做vue项目的时候,遇到子元素有点击事件,父元素也有点击事件,当点击子元素时往往触发的是父元素的点击事件,产生冲突,怎样解决这个问题呢?这就用到vue事件 ...
百度地图：为标记添加点击事件显示标注
之前写了百度地图的标注,原文链接:使用百度地图API实现地图生成.标记以及标注,但是因需求更改,标注的显示需要通过点击标记才能显示. 以下为更改内容: //给标记添加点击事件以及显示窗口信息var i ...
高德地图单点、多点标记，轨迹绘制，自定义标记覆盖物,给标记添加点击事件，移除所有标记和轨迹，轨迹回放功能
文档地址 https://lbs.amap.com/api/javascript-api/guide/abc/prepare 注册到官网注册一下就可以了https://lbs.amap.com/并创 ...
Vue项目判断鼠标点击事件的左键、中键（滚轮）或右键
Vue项目判断鼠标点击事件的左键.中键(滚轮)或右键去掉特定区域的右键点击事件在需要去掉右键点击事件的区域最外层div标签中添加@contextmenu.prevent属性 <templat ...
如何通过JS动态给li标签添加点击事件并跳转
如何给li标签添加点击事件一.HTML demo代码二.JS动态新增li并绑定点击事件三.效果图有很长一段时间没写博客了,最近做了一个类似于榜单的小需求,遇到了一些小问题,姑且简单的记录一下吧 ...

vue router-link 添加点击事件

vue router-link 添加点击事件相关推荐

最新文章

热门文章