返回 Nuxt 中调用事件监听器的元素

Question

I am working on a Nuxt project where I have a my component setup with the following code. On the select-parent-container there is a click event. When a click event occurs I want to return the particular parent container that called the event. Do note that this runs in a loop.

<div class="flex space-x-4 select-parent-container" @click="switchItOn" v-for="option in options" :key="option.id">
 <div class="flex space-x-2 items-center select-switcher-container">
  <div class="relative w-8 h-3 bg-gray-500 rounded-full select-toggler">
   <div class="absolute h-4 w-4 rounded-full bg-white left-0 select-switch"></div>
  </div>
 </div>
 <div class="option__desc">
  <span class="option__title">{{ props.option.name }}</span>
 </div>
</div>

In my script area, I have defined a function as

switchItOn: function(event) {
 console.log(this)
},

Usually, in vanila javascript, calling this on the eventlistener returns the element that called the event. Here, in Nuxt, calling this returns the whole component object. I want to return the element that called it. I tried event.target , however the problem with that is it returns children element nested inside it and would not be optimal to run the particular operations I want to.

Please kindly guide me on this.

Answer 1

I've tested this code based on your question and it works fine for me.

You should pass the event parameter to the switchItOn and use event.target.parentNode as the selector.

switchItOn: function(event) {
 console.log(event.target.parentNode)
},

If you're interested in this property, you can read about it here