CFormCheckbox - HTML checked attribute not working as expected

[jgulledge19]

This is either a bug or just a confusing set up, or maybe it is just me.

Issue: the HTML attribute checked works only if value and v-model Vue properties are not used. If they are used then the checked attribute is ignored.

Simple toggle examples

I have been using Core UI 4 for a while and in v4.8.1 and below this working example: https://playcode.io/1759963, both checkboxes worked, now only one of them works.

Using a checkboxes in a list of say related models, attaching one to many:

Example: https://playcode.io/1759889

What I found

• By default when using v-model, it is now reactive as a bool - this seems to be the Vue way of doing things.
• You can use the checked HTML attribute. But the checked attribute is not reactive and it cannot be used in combination with the value and v-model properties.
  • I would have expected that you could use checked along with value. I assume that value should be static as far as the component is concerned. It does make sense to make the v-model a reactive bool and if used then it would determine if it is checked or not.
  • In my use case, I had created a component and did not want to use v-model as I had a listener, @input, emitting the $event and value and the parent update the data model and then push back to the component the selected list via a property selectedValues. I have since refactored my component to work with v4.10.2+ so I am in no need of a quick fix.

Maybe just some clarity on the docs if you wish to keep the logic as is.

• Operating system and version Windows 11 and macOS
• Browser and version - all Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser

Vue Core UI 4 has been a great tool! Thanks for reviewing!

[mrholek]

@jgulledge19 I released v5.0.0-rc.2, can you check it?