Vue.js 2/Javascript mouseover 方法在 mousein 和 mouseout 上应用事件

Question

我的问题只是如何在鼠标悬停时运行 Vue 方法一次，而不是运行在 mousein 和 mouseout 上都使用它。

例如，这是我在 Vue 中使用的模板，我在其中循环访问一些数据，我希望名为 showSkill() 的方法仅触发一次，当前在 mousein/mouseout:

上同时触发的位置

<div class="col-md-3" v-for="skill in skills" :key="skill.id">
  <label :for="skill.nickname">{{ skill.name }}</label>
  <div :id="skill.nickname" @mouseover="showSkill(skill)"></div>
</div>

方法如下：

showSkill(skill) {
  jQuery(`#${skill.nickname}`).empty()
  this.drawDonutChart(`#${skill.nickname}`, (skill.level/100).toFixed(2) * 100, 200, 200, '.35em')
},

我认为这是一个事件问题，而不是 Vue 问题。任何建议将不胜感激！

Answer 1

使用 once 修饰符。

<div :id="skill.nickname" @mouseover.once="showSkill(skill)"></div>

Vue.js 2/Javascript mouseover 方法在 mousein 和 mouseout 上应用事件

Vue.js 2/Javascript mouseover method applying events on mousein and mouseout

javascript

vue.js

mouseevent

vuejs2

mouseover