Click triggered twice Vue.js

Solution 1:

as noted in the comment, either will work, self on first instance, or stop on second

displayGeneralTip (bool) {
  this.generalTip = bool
}

<div v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" @click.self="displayGeneralTip(true)">
  <img src="~assets/exercises/bulb.svg" alt="Ampoule éteinte">
  <span>Astuce</span>
</div>

<div v-if="generalTip" class="sm-exercise-block sm-exercise-general-tip-expand">
  <div class="general-tip-bulb-icon">
    <img src="~assets/exercises/lighted-bulb.svg" alt="Ampoule allumée">
  </div>
  <div class="sm-exercise-block-tip">Some text</div>
  <div class="sm-exercise-hide-answer" @click.stop="displayGeneralTip(false)">
    <span>Masquer</span>
    <img src="~assets/exercises/eye.svg" alt="masquer">
  </div>
</div>

but you may wonder why this is necessary...

the problem is that the two divs, (<div v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" and sm-exercise-block sm-exercise-general-tip-expand are rendered as the same diff, and the event listener from the first is passed on to the other щ(ºДºщ)

I reckon that it's more of a bug than feature in this case, but with the more recent version of vue it's very easy to fix by using key

<div :key="div1" v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" @click.self="displayGeneralTip(true)">
  <img src="~assets/exercises/bulb.svg" alt="Ampoule éteinte">
  <span>Astuce</span>
</div>
<div :key="div2" v-else class="sm-exercise-block sm-exercise-general-tip-expand">
  <div class="general-tip-bulb-icon">
    <img src="~assets/exercises/lighted-bulb.svg" alt="Ampoule allumée">
  </div>
  <div class="sm-exercise-block-tip">Some text</div>
  <div class="sm-exercise-hide-answer" @click.stop="displayGeneralTip(false)">
    <span>Masquer</span>
    <img src="~assets/exercises/eye.svg" alt="masquer">
  </div>
</div>

(also v-else is a great candidate for this kind of conditional)