Vue: @click ईवेंट अन्य vnode @click ईवेंट को ट्रिगर करेगा।

को निर्मित 11 सित॰ 2017 · 4टिप्पणियाँ · स्रोत: vuejs/vue

संस्करण

2.4.2

प्रजनन लिंक

https://jsbin.com/qejofexedo/edit?html , js, output

प्रजनन करने कि प्रक्रिया

प्रजनन लिंक देखें।

क्या उम्मीद है?

जब मैं Expand is True क्लिक करता हूँ, तो expand false । और केवल countA बदल गए।

वास्तव में क्या हो रहा है?

जब मैं Expand is Ture क्लिक करता हूं, तो कुछ नहीं हुआ।
countA और countB बदल गए।
मुझे लगता है कि जब मैं क्लिक करता हूं, तो expand बदलकर false , लेकिन तत्काल क्लिक इवेंट ट्रिगर हो जाता है। यह एक और vnode click event को निष्पादित करता है। फिर बदलकर true ।

और अधिक

अगर मैं दूसरे टैग नाम का नाम बदलकर p , section करूं, तो कोई त्रुटि नहीं होती है।
अगर मैं क्लिक करें घटना को i टैग से जनक div प्रथम टैग में टैग में ले जाऊं, तो कोई समस्या नहीं होती है

bug improvement

स्रोत

XGHeaven

👍2

सबसे उपयोगी टिप्पणी

तो, यह होता है क्योंकि:

अगले क्लिक पर ( <i> माइक्रोटस्क) पर <i> आग पर आंतरिक क्लिक घटना
माइक्रोटस्क को संसाधित किया जाता है इससे पहले कि घटना बुलबुले से बाहरी div तक पहुंच जाए । अपडेट के दौरान, एक क्लिक श्रोता बाहरी div में जोड़ा जाता है।
क्योंकि DOM संरचना समान है, बाहरी div और आंतरिक तत्व दोनों का पुन: उपयोग किया जाता है।
घटना अंत में बाहरी div तक पहुंचती है, 1 अपडेट द्वारा जोड़े गए श्रोता को ट्रिगर करती है, बदले में 2 अपडेट को ट्रिगर करता है।

यह ठीक करने में काफी पेचीदा है, और अद्यतन कतार के लिए माइक्रोटस्क का लाभ उठाने वाले अन्य कामों में भी यह समस्या है (उदाहरण के लिए)। रिएक्ट में यह समस्या नहीं है क्योंकि वे एक सिंथेटिक ईवेंट सिस्टम का उपयोग करते हैं (संभवतः इस तरह के किनारे मामलों के कारण)।

इसके चारों ओर काम करने के लिए, आप बस दो बाहरी डिवीजनों को अलग-अलग कुंजी दे सकते हैं ताकि उन्हें अपडेट के दौरान बदलने के लिए मजबूर किया जा सके। इससे बुदबुदाती हुई घटना को उठाया जा सकेगा:

<div class="header" v-if="expand" key="1"> // block 1
  <i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++" key="2"> // block 2
  <i>Expand is False</i> // element 2
</div>

yyx990803 13 सित॰ 2017

👍9

सभी 4 टिप्पणियाँ

qq20170911-185025
सामान्य लगता है

Kingwl 11 सित॰ 2017

👍1

आपका रिप्रो इरादा के अनुसार काम कर रहा है ...

yyx990803 11 सित॰ 2017

@Kingwl @ yyx990803 इसके बारे में क्षमा करें। मैं दूसरों के मामले का परीक्षण करता हूं और वापस बदलना भूल गया हूं।

महत्वपूर्ण कोड है

<div class="header" v-if="expand"> // block 1
  <i @click="expand = false, countA++">Expand is True</i> // element 1
</div>
<div class="expand" v-if="!expand" @click="expand = true, countB++"> // block 2
  <i>Expand is False</i> // element 2
</div>

चार मामला है:

क्लिक इवेंट सुन block 1 और block2 , अच्छी तरह से काम करता है
क्लिक इवेंट सुन element 1 और element 2 , अच्छी तरह से काम करता है
क्लिक इवेंट सुन block 1 और element 2 , expand को सही पर बदलें ठीक है। लेकिन वापस नहीं बदल सकते।
क्लिक इवेंट सुन element 1 और block 2 , expand को गलत में नहीं बदल सकते। लेकिन expand को सच में बदल सकते हैं।

XGHeaven 11 सित॰ 2017