Search code examples
javascriptvue.jsmouseeventvuejs2mouseover

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

my question is just how to run a Vue method one time on mouseover, rather than running it both on mousein and on mouseout.

For example here is the template I am using in Vue, where I am looping through some data and I want a method called showSkill() to fire only once, where it is currently firing both on 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>

Here is the method:

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

I think this is an event issue more than a Vue issue. Any suggestions would be greatly appreciated!

Solution

  • Use the once modifier.

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