在 VueJS 中处理 DOM 元素单击事件

Posted 2023-03-16

【中文标题】在 VueJS 中处理 DOM 元素单击事件

【英文标题】：Handle DOM element click event in VueJS

【发布时间】：2021-05-31 02:07:49

【问题描述】：

我有一种特殊情况，我不能在我的代码中使用 VueJS html 语法，但我想使用 VueJS 函数来处理 DOM 事件，例如单击按钮：

HTML：

<h1 id="header">Not Clicked</h1>
<!-- I can only use simple HTML here so no "@click", "v-bind:on-click" etc. -->
<button id="mybtn" type="button">click me</button>

鉴于上面的按钮，这就是我将如何使用 jquery 来处理点击事件而不接触 HTML：

$('#mybtn').click(function()
  document.getElementById('header').textContent = "Clicked";
)

如何在 VueJS 中编写相同的 javascript 函数而不用 VueJS 语法更改 HTML 按钮？

现场演示：https://playcode.io/744155

【问题讨论】：

你想要什么 VueJS 函数？你有什么情况？

一个 VueJS 函数，它根据元素的 DOM id 处理点击元素，就像在 jquery 中一样

你考虑过使用vue-test-utils.vuejs.org.html，尤其是trigger()

【参考方案1】：

我相信您正在寻找的是这样的东西。它肯定有一些代码味道，但听起来你有一个独特的用例：

mounted() 
  this.$refs['header'].addEventListener('click', (e) => 
    // Do stuff
  
,
beforeDestroy() 
  this.$refs['header'].removeEventListener('click'), (e) => 
    // Do stuff
  

本质上是获取元素并为其添加一个事件侦听器，然后做一些事情。组件销毁时别忘了removeEventListener。

如果在上面的代码中元素仍然是undefined，那么你需要像这样将它包装在nextTick 中，这将确保元素不仅被创建，而且被插入到 DOM 中：

mounted() 
  this.$nextTick(function() 
    this.$refs['header'].addEventListener('click', (e) => 
      // Do stuff
    
  );
,

【讨论】：

但 header 是 id，而不是 ref 所以它对我来说是未定义的

@FabioMagarelli 我稍微更新了代码，希望能解决这个问题。如果它仍然是undefined，那么您需要将已挂载的生命周期钩子内的代码包装在this.$nextTick(function() )

您好，感谢您的回答和您的耐心。我实际上是通过找到一种不必访问 DOM 的方式来解决它的。