在 VueJS3/Nuxt 应用程序中添加动态事件列表

Question

我目前正在努力解决我想向组件添加数据属性的问题，然后根据加载 NUXT 的时间将点击事件绑定到具有此数据属性的所有节点。 我没有使用 v-on，因为我想将它与当前的 Vue 逻辑分开。 所以例子：

组件 a.vue 被标记为数据元素

  <a href="/somelink" data-element>link</a>

组件 b.vue 也有标记为 data-element 的 HTM 元素

 <button data-element>link</button> 

当应用程序加载时，我需要循环遍历所有数据元素并将事件列表器绑定到它们。

我尝试了上述方法并且在某种程度上起作用但在反应性设置和 DOM 更新时失败。 我检查了 mixins（不推荐使用 VueJS3），使用了组合 API，使用了一个突变观察器来检查 DOM 状态的变化，并根据新元素加载它的广告点击事件，查看钩子等，但现在我对什么是最好的感到困惑方式进行。 有些解决方案在一定程度上有效，但感觉很老套。 还是我缺少一种完全不同的方法。

Answer 1

为确保 DOM 已初始化，您需要将事件侦听器设置为“已安装”生命周期

mounted() {
  const elements = [...document.querySelectorAll('[data-element]')];
  elements.forEach(element => {
    element.addEventListener('click', () => { /* your code here. */ })
  })
}