Tengo un componente con un router-link como "elemento raíz" en Vue y me gustaría activar el enfoque en mouseenter y desenfoque en mouseleave . Actualmente lo he configurado así:
<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>Pero el enfoque y el desenfoque no se activan cuando muevo o dejo el mouse sobre el enlace con este código. Tampoco recibo errores en la consola. ¿Hay algo adicional que deba hacerse para que funcione?
Problema realmente tonto, pero simplemente tuve que agregar @mouseenter.native y @mouseleave.native para activar los métodos, ya que router-link es obviamente un componente.