I am currently developing a Nuxt project where I have set up my component using the code below. The select-parent-container has a click event attached to it. Whenever this event is triggered, I need to identify and return the specific parent container that initiated the event. It's important to note that this functionality occurs within 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 section, I have defined a function as shown below:
switchItOn: function(event) {
console.log(this)
},
Typically, in vanilla JavaScript, using this in an event listener would return the element that triggered the event. However, in the context of Nuxt, calling this returns the entire component object instead. I specifically need the element that invoked the event. Although I attempted using event.target, it tends to return nested child elements which is not ideal for the operations I intend to perform.
I would greatly appreciate your guidance on how to achieve this.