首页 > 代码库 > vue router-link 上添加点击事件
vue router-link 上添加点击事件
在vue学习中遇到给router-link 标签添加事件@click 、@mouseover等无效的情况
我想要做的是鼠标移上去出现删除标签,移除标签消失的效果
原代码:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag" @mouseout="outTag">{{item.listTitle}}
<i class="contain_tab_close" v-show="toRemove"></i>
</router-link>
后在发现参考
https://segmentfault.com/q/1010000007896386
http://www.jianshu.com/p/0a8a89687bb6
根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话,需要加上native
修饰符。
所以如果在想要在router-link上添加事件的话需要@click.native这样写
所以如果要事件有效的话,改成如下:
<router-link v-for="(item, index) in pageMenuList" :to="{ path: item.listLink }" @mouseover="overTag" @mouseout="outTag">{{item.listTitle}}
<i class="contain_tab_close" v-show="toRemove"></i>
</router-link>
学习笔记,请多多指教!
vue router-link 上添加点击事件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。