Vue: @click would trigger event other vnode @click event.

seems normal

Your repro is working as intended...

@Kingwl @yyx990803 Sorry about that. I test others case and forgot to change back.

The important code is

<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>

There is four case:

• click event listen on block 1 and block2, works well
• click event listen on element 1 and element 2, works well
• click event listen on block 1 and element 2, change expand to true is ok. But cannot change back.
• click event listen on element 1 and block 2, cannot change expand to false. But can change expand to true.

So, this happens because:

• The inner click event on <i> fires, triggering a 1st update on nextTick (microtask)
• The microtask is processed before the event bubbles to the outer div. During the update, a click listener is added to the outer div.
• Because the DOM structure is the same, both the outer div and the inner element are reused.
• The event finally reaches outer div, triggers the listener added by the 1st update, in turn triggering a 2nd update.

This is quite tricky in fix, and other libs that leverages microtask for update queueing also have this problem (e.g. Preact). React doesn't seem to have this problem because they use a synthetic event system (probably due to edge cases like this).

To work around it, you can simply give the two outer divs different keys to force them to be replaced during updates. This would prevent the bubbled event to be picked up:

<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>