vuetify
vuetify copied to clipboard
[Bug Report][3.0.0] VSwitch only outputs every second toggle
Environment
Vuetify Version: 3.0.0-beta.8 Vue Version: 3.2.36 Browsers: Chrome 102.0.5005.149 OS: Linux x86_64
Steps to reproduce
- open the codepen
- click on the switch, observe the brief "ON" label to indicate output event
- observe that the switch hasn't toggled due to disconnect between output event and modelValue prop
- click on the switch again, observe that no output event is produced (the label doesn't flash "ON")
- click on the switch more often and observe that only every second click results in an event
Expected Behavior
I expected an output even on every click
Actual Behavior
Only every second click produces an output event
Reproduction Link
https://codepen.io/codesurfr/pen/NWYJyPV
Other comments
The intent here is to process and validate the switch output before feeding it back such that the switch only toggles visually IF the action it is intended to cause actually took place. I.e., if the user clicks the switch and the external action doesn't occur, then the switch doesn't change position.
This could be a bit tricky, since vue does not support controlled inputs the same way react does. https://github.com/vuejs/core/issues/6084
Since our v-switch is backed by an <input>, it gets checked even though the model hasn't changed.
I updated the codepen to the 3.0.0 release, problem still exists.
You can't use @update:modelValue and not update the model https://codepen.io/johnjleider/pen/rNZRmZg
If you have any questions, please reach out to us in our Discord community.