点击触发两次 Vue.js [英] Click triggered twice Vue.js

查看：30
本文介绍了点击触发两次 Vue.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这个代码

displayGeneralTip (bool) {this.generalTip = bool}

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

<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 class="sm-exercise-block-tip">一些文字</div><div class="sm-exercise-hide-answer" @click="displayGeneralTip(false)"><span>Masquer</span><img src="~assets/exercises/eye.svg" alt="masquer">

最初，generalTip 设置为 false.单击第一个 div 以显示文本时，它工作正常.第一个方块消失，第二个出现.

但是当点击div隐藏答案(sm-exercise-hide-answer)时，它会用bool false触发方法displayGeneralTip，但在它之后用bool true触发相同的方法.好像我们点击了第二个 div 和第一个.

我尝试将带有文本的 div 放在我页面中的其他位置，并且效果很好.两个div必须在页面同一个地方时出现问题

有人遇到过这个问题吗?

解决方案

如评论中所述，要么工作，第一次自我，要么第二次停止

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 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 class="sm-exercise-block-tip">一些文字</div><div class="sm-exercise-hide-answer" @click.stop="displayGeneralTip(false)"><span>Masquer</span><img src="~assets/exercises/eye.svg" alt="masquer">

但你可能想知道为什么这是必要的...

问题在于这两个 div， (<div v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" 和 sm-exercise-block sm-exercise-general-tip-expand 呈现为相同的差异，并且第一个的事件侦听器被传递到另一个 щ(ºДºщ)

我认为在这种情况下它更像是一个错误而不是功能，但是在更新版本的 vue 中，使用 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 :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 class="sm-exercise-block-tip">一些文字</div><div class="sm-exercise-hide-answer" @click.stop="displayGeneralTip(false)"><span>Masquer</span><img src="~assets/exercises/eye.svg" alt="masquer">

(也v-else 是这种条件的一个很好的候选)

I have this code 

displayGeneralTip (bool) {
  this.generalTip = bool
}

<div v-if="!generalTip" class="sm-exercise-tip sm-exercise-general-tip" @click="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="displayGeneralTip(false)">
    <span>Masquer</span>
    <img src="~assets/exercises/eye.svg" alt="masquer">
  </div>
</div>

Initially, generalTip is set at false. When clicking on the first div to display text, It works fine. The first block disappear, and the second one appears.

But when clicking on the div to hide answer (sm-exercise-hide-answer), It triggers the method displayGeneralTip with bool false, but just after it triggers the same method with bool true. As if we clicked on the second div and the first one too.

I tried to put the div with text else where in my page, and it works fine. The problem appears when the two divs must be on the same place on the page

Anyone had this problem ?

解决方案

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)

这篇关于点击触发两次 Vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆