点击触发两次 Vue.js

Question

我有这个代码

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>

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

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

我尝试将带有文本的 div 放在页面的其他位置，但效果很好。当两个 div 必须在页面上的同一位置时会出现问题

有人遇到过这个问题吗？

Answer 1

如果您在子组件中遇到这种情况（我在搜索“vue img 点击调用两次”时从 Google 来到这里），如果 @click.stop 或 @click.prevent 工作的肮脏答案是一个简单的标志。

在你的组件里面data定义一个标志，例如clicked：

  data: () => ({
    clicked: false,
  }),

在点击时调用的内部方法，做这个：

  methods: {
    handleClick() {
      if (!this.clicked) {
        console.log("Click");
        this.clicked= true;
      }
    },
  },

Answer 2

如评论中所述，要么将工作，要么在第一个实例上运行，要么在第二个实例上停止

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>

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

问题在于两个 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>
<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>

（也 v-else 是这种条件的绝佳候选者）