How to Handle Vue Router Link Mouse Events Properly
March 24, 2019
Digging deeper into Vue router, I attempted something fairly mundane, namely listening to a couple of mouse events on an anchor tag generated by
I simply wanted to toggle a menu when hovering over a certain link. Easy, right? Well, the events simply weren't registering.
Note I am using Vue 2.6 for this example.
A bit of a head-scratcher but after some research I found out that all I needed to do was to apply the
native modifier to the event, as shown below.
This code doesn't trigger the handler.
<template> <router-link to="/someroute" @mouseenter="handleEvent" @mouseleave="handleEvent" > Some Route </router-link> </template>
<template> <router-link to="/someroute" @mouseenter.native="handleEvent" @mouseleave.native="handleEvent" > Some Route </router-link> </template>