Vue: @click은 다른 vnode @click 이벤트를 트리거합니다.

정상인 것 같다

재현이 의도 한대로 작동합니다 ...

@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 를 true로 변경해도 괜찮습니다. 그러나 되돌릴 수는 없습니다.
• 클릭 이벤트는 element 1 및 block 2 에서 수신합니다. expand 를 false로 변경할 수 없습니다. 그러나 expand 를 true로 변경할 수 있습니다.

따라서 이것은 다음과 같은 이유로 발생합니다.

• <i> 의 내부 클릭 이벤트가 발생하여 nextTick (마이크로 태스크)에 대한 첫 번째 업데이트를 트리거합니다.
• 마이크로 태스크는 이벤트가 외부 div로 버블 링되기 전에 처리됩니다 . 업데이트 중에 클릭 리스너가 외부 div에 추가됩니다.
• DOM 구조가 동일하기 때문에 외부 div와 내부 요소가 모두 재사용됩니다.
• 이벤트는 마지막으로 외부 div에 도달하고 첫 번째 업데이트에서 추가 한 리스너를 트리거 한 다음 두 번째 업데이트를 트리거합니다.

이것은 수정이 매우 까다 롭고 업데이트 큐잉을 위해 마이크로 태스크를 활용하는 다른 라이브러리도이 문제를 가지고 있습니다 (예 : Preact). React는 합성 이벤트 시스템을 사용하기 때문에 이러한 문제가없는 것 같습니다 (아마도 이와 같은 엣지 케이스로 인해).

이 문제를 해결하려면 두 개의 외부 div에 서로 다른 키를 제공하여 업데이트 중에 강제로 교체되도록 할 수 있습니다. 이렇게하면 버블 링 된 이벤트가 선택되지 않습니다.

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