jeudi 25 août 2022

Multiple custom checkboxes in Vue3 react differently when clikcing label vs input

I have a custom checkbox where the input and a separate (custom) label flip the checked value. When checked is changed, a watch picks it up and $emits the value to the parent.

In the parent, I have two of the same Toggle components, however when I click the Toggle input, it only triggers the first toggle (unexpected). If I click the label, it triggers the correct toggle switch (as expected).

Can someone please explain what is happening here?

https://codesandbox.io/s/vue3-base-forked-3ppj0j?file=/src/components/Toggle.vue

The event being emitted is the same, regardless of clicking the label or the input, so why does one work and the other doesn't?




Aucun commentaire:

Enregistrer un commentaire