v-if bugs when used inside of label+button construction
Vue version
v3.2.47
Link to minimal reproduction
Steps to reproduce
click on the button
What is expected?
one click
What is actually happening?
double click
System Info
No response
Any additional comments?
If you have label+button construction and use v-if inside of it clicking on the button causes double click:
- click on element with v-if from user
- click on button from label
This issue is not caused by VUE and can also exist when not using a framework.
This issue is not caused by VUE and can also exist when not using a framework.
Can you please give me an example? I thought this is because click on the div with v-if in this example causes click initiated from label because for some reason label doesn't count this div as a part of the button (just like if I click on the label itself outside of the button)
It seems that if label element wrap a button element which wrap a div element with v-if, that div element will be added a eventListener uncorrectly. It's weird.
a workaround: @click.prevent="toggle"
This issue is not caused by VUE and can also exist when not using a framework.
Can you please give me an example? I thought this is because click on the div with v-if in this example causes click initiated from label because for some reason label doesn't count this div as a part of the button (just like if I click on the label itself outside of the button)
