Checkbox cannot change state of itself after click event
Vue version
3.2.45
Link to minimal reproduction
Steps to reproduce
Actually, I have 2 Bugs here, but I think they are related:
Bug: Click on the checkbox several times. It changes state but it should not because I changed the reactive variable to always be false in the click event handler.
Bug Click on the checkbox. It changes its state to false. Click again it changes its state to true.
Now, when you press the "Make false" button the checkbox does not change its state. BUT when you now click on the "Make true" button the "Make false" button starts working again.
What is expected?
Bug Checkbox is always checked=false after clicking on the checkbox.
Bug The 2 Buttons should always work.
What is actually happening?
- Checkbox switches state even though it should not.
System Info
System:
OS: Windows 10 10.0.19044
CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
Memory: 19.38 GB / 31.64 GB
Binaries:
Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.56)
Internet Explorer: 11.0.19041.1566
npmPackages:
vue: ^3.2.45 => 3.2.45
Any additional comments?
No response
All of this is expected. you are not controlling the checkbox properly. when the checkbox is changed - in the UI - to "checked", you don't reflect that in a state change: state.checked stays false - so Vue has no reason to re-render (as no reactive state changed), and thus the checkbox in the UI will remain checked, while your state will stay checked: false.
You essentially chose to decouple your code's state from the browser UI state.
So either properyl control the state with i.e. v-model, or make the checkbox readonly when you don't want people to change its state under certain conditions.