I am currently working on a Vue component where the main element is a router-link. My goal is to have the element focus when I hover over it and blur when I move my mouse away. Here is how I have set it up:
<template>
<router-link
:to="LINK"
ref="card"
@mouseenter="focus"
@mouseleave="blur"
>
CONTENT
</router-link>
</template>
<script>
export default {
methods: {
focus() {
this.$refs.card.$el.focus();
},
blur() {
this.$refs.card.$el.blur();
},
}
}
</script>
Despite setting everything up correctly, I am experiencing issues as the focus and blur events are not triggered when I interact with the link using my mouse. There are no errors showing in the console either. Is there something else that needs to be done for this functionality to work properly?