Updating refs that are on <template> with @click on a checkbox input will not check the checkbox.
Vue version
3.2
Link to minimal reproduction
Steps to reproduce
click the checkbox. observe the {{cls}} value change and the checkbox not checking. If you remove {{cls}} from the template the box will check.
What is expected?
The view re renders with the updated string ref {{cls}} and the checkbox is checked.
What is actually happening?
click the checkbox. observe the cls value change and the checkbox not checking. If you remove {{cls}} from the template the box will check.
System Info
multiple systems / OS's
Any additional comments?
potentially related to this issue: https://github.com/vuejs/core/issues/8579
Explanation of cause from a member in the vue discord channel:
Clicking on the checkbox sets the checked state of the checkbox to true. The click event happens. Vue re-renders. The data bound to the v-model hasn't been updated yet, so when it re-renders the checkbox it sets it back to unchecked. The change event happens, triggering the v-model. But that performs the update based on the current value of the checked property, which is now back to false.
I originally posted this as a comment on #8579, but I'll move my comment here instead. The minimal reproduction below is effectively the same as the one on this issue, but I think the second example helps to illustrate how the problem can happen in a slightly more realistic scenario.
I just encountered a similar problem while investigating a question on Vue Land. I was going to open a new issue, but I think it's effectively the same underlying cause.
In this case it's a checkbox that can't be updated by clicking, because the click event triggers a re-render. Binding the v-model to an array is required to hit the problem:
The v-model update is triggered by the change event, which fires after the checkbox has been set back to unchecked by the re-render.
As my previous example seems a bit too artificial, I've also put together a slightly longer example that shows a more realistic use case: