CLIC觸發兩次Vue.js

我有這樣的代碼CLIC觸發兩次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> 
 

 
<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被設置爲假。當點擊第一個div顯示文本時，它工作正常。第一塊消失，第二塊出現。

但是當點擊div來隱藏答案（sm-exercise-hide-answer）時，它會用bool false觸發方法displayGeneralTip，但在它觸發與bool true相同的方法之後。就好像我們也點擊了第二個div和第一個div。

我試圖把div與文本其他地方放在我的頁面，它工作正常。當兩個div必須在頁面上的相同位置時出現問題

任何人都有這個問題？

來源

2017-08-10 Juliane Blier

嘗試'@ click.stop'或@ click.self – WaldemarIce

如意見指出，無論是將工作，自初審，或停在第二

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是一個很好的候選對於這種有條件的）

來源

2017-08-10 22:22:46 Daniel

它與第二次電話的.stop合作:)謝謝！

來源

2017-08-16 10:23:50

您最好在答案下面發表評論，而不是在這裏回答。 – choasia

CLIC觸發兩次Vue.js

回答

相關問題