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

【问题标题】：Return the element that called the event listener in Nuxt返回 Nuxt 中调用事件监听器的元素
【发布时间】：2020-10-07 17:58:56
【问题描述】：

我正在开发一个 Nuxt 项目，我在其中使用以下代码设置了我的组件。在select-parent-container 上有一个点击事件。当点击事件发生时，我想返回调用该事件的特定父容器。请注意，这是循环运行的。

<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>

在我的脚本区域中，我定义了一个函数为

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

通常，在 vanila javascript 中，在 eventlistener 上调用 this 会返回调用该事件的元素。在这里，在 Nuxt 中，调用 this 返回整个组件对象。我想返回调用它的元素。我尝试了event.target，但是问题在于它返回嵌套在其中的子元素，并且对于运行我想要的特定操作不是最佳的。

请在这方面指导我。

【问题讨论】：

提供一个最小的完整可执行可重现代码示例总是有助于获得最佳答案。

标签： javascript vue.js nuxt.js

【解决方案1】：

我已经根据你的问题测试了这段代码，它对我来说很好。

您应该将event 参数传递给switchItOn 并使用event.target.parentNode 作为选择器。

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

如果你对此房产感兴趣，可以阅读here

【讨论】：