search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
46.81k stars 8.21k forks source link

v-if bugs when used inside of label+button construction #7920

Open nymphaea-v1 opened 1 year ago

nymphaea-v1 commented 1 year ago

Vue version

v3.2.47

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVU8uO2zAM/BVWQLG76MZO0gIF0iRIjz31B3zxg7bVyJIh0c4ugvx7KcneelOgQO2LSY5mSI51Fd/7PhkHFDsxrmQNxdA4uLSoYXBYgdROVgimBpUXqD4VA5HRUBrtyA4lSaMzfn/U8GoGaPMRYR+Qx32EHvfp20csvDsMua68EgTxP2qSoFSyPEvdAKOoRe4sSucMd1CZoVAYQTvI9OYpfns0KuxQE1wktZG4tqbzMjbT2wVwogzV0JyfZU/Y9SonPHJE0zSZBuBg7kHlzh0yEcNMwClQcoZM0yjMRDjgn30lx9ADF6X72aOHz+cNh1hxIr3Ho+KdzLBSGfZiAXvbqQ/nvXLn6bJ1vXellT2BQxr6AJVdbyzBFSzWcItzP7D5Dx6eUTAGYpdw8KDHOudGnnwZom8QJ+TyI4685Cc4HOEa24onkzFXgwd8WMYRkabg5/OmT7sLac9sFCbKNJE1odw2SCwMcPODxVGmsehV+QkBksmPSf8iK2p3sNmu+5dvMdWibFrawSJVGFuhZVj/AqwquRWVl+dQZS322TNHa2bmmWazXn+cafhMY82gq1VplGHCxiLqO5po3X/RWKxmEp47zCqeRbRu1eV98ssZzdc1cPJPFQouE7tZJRNsqY8z0RL1bpemg+7PTVKaLj1xLbWDJtnhqjLd6XOyTb58TSvpaJlP0HWrwpoLXxpWzMTzgjzl5Ih2ZVHzKvlW/UvsDvtO8K72l+i0h5u4/QZ3yZTB

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:

yangxiuxiu1115 commented 1 year ago

This issue is not caused by VUE and can also exist when not using a framework.

nymphaea-v1 commented 1 year ago

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)

songbing97 commented 1 year ago

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.

edison1105 commented 1 year ago

a workaround: @click.prevent="toggle"

yangxiuxiu1115 commented 1 year ago

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)

image