CODEWITHSUNDEEP
javascriptvue.jsvue-component
Mart Cube
Mart Cube

Reputation: 77

Vue.js event target is null?

I got a component with two styled buttons and one same event "mouseEnter". 

<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 event triggers I want to do something with the path and the span of the button that is hovered.

I'm trying to reference them with event.target but for the span I get null, and for the path everything is working good.

methods: {
  buttonEnter(event) {
    const buttonPath = event.target.querySelector('path')
    const buttonSpan = event.target.querySelector('span')
    
    ...
}

How should i reference the span ? Is there any other way I can do it ?

Upvotes: 1

Views: 4669

Answers (1)

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

the event target will bubble up starting from the children of the node that you attached your listener to. Use event.currentTarget

Upvotes: 1

Related Questions