Vue.js 2 / Javascript鼠标悬停方法在mousein和mouseout上应用事件

时间:2017-08-03 01:52:29

标签: javascript vue.js mouseevent vuejs2 mouseover

我的问题是如何在鼠标悬停时运行一次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问题更多的事件问题。任何建议将不胜感激!

1 个答案:

答案 0 :(得分:3)

使用once修饰符。

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