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

【问题标题】：Vue.js 2/Javascript mouseover method applying events on mousein and mouseoutVue.js 2/Javascript mouseover 方法在 mousein 和 mouseout 上应用事件
【发布时间】：2017-08-03 01:52:29
【问题描述】：

我的问题是如何在 mouseover 上运行一次 Vue 方法，而不是在 mousein 和 mouseout 上都运行它。

例如，这是我在 Vue 中使用的模板，我在其中循环了一些数据，我希望一个名为 showSkill() 的方法只触发一次，它目前正在同时触发鼠标输入/鼠标输出：

<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 问题。任何建议将不胜感激！

【问题讨论】：

我只能让它开火一次。 Fiddle.

标签： javascript vue.js mouseevent vuejs2 mouseover

【解决方案1】：

使用once 修饰符。

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

【讨论】：

这是一个了不起的功能，正是我想要的。谢谢伯特！