In my component, there are two buttons styled differently but with the same "mouseEnter" event.
<template>
<div>
<a
class="button red"
href="/about"
@mouseover="mouseEnter">
<svg viewBox="0 0 180 60">
<path d="..."/>
</svg>
<span class="buttonSpan">About</span>
</a>
<a
class="button green"
href="/contact"
@mouseover="mouseEnter">
<svg viewBox="0 0 180 60">
<path d="..."/>
</svg>
<span class="buttonSpan">Contact</span>
</a>
</div
</template>
When the "mouseEnter" event is triggered, I need to manipulate the path and span elements of the hovered button.
I'm trying to access them using event.target, but I am unable to select the span element as it returns null. However, everything works fine for the path element.
methods: {
buttonEnter(event) {
const buttonPath = event.target.querySelector('path')
const buttonSpan = event.target.querySelector('span')
...
}Is there a better way to reference the span element? Any alternative approaches would be appreciated.