VueFormulate schema checkboxes don't match default value

[mfcodeworks]

Describe the bug

VueFormulate schema doesn't set the default values for checkboxes, it always sets an empty string"". Checkbox values only become boolean after interacting.

To Reproduce

1. Create any schema with a checkbox object and a value (True, false, 'selected', or otherwise)
2. Attach to a VueFormulate form as the schema
3. Inspect the v-model value returned
4. Interact with the checkbox
5. Inspect the returned value again

Expected behavior

VueFormulate should set the checkbox value according to what's passed in the schema i.e. true/false

Screenshots

Device information:

• OS: Windows 10
• Browser: Brave Browser (Chromium)
• VueFormulate version: 2.5.2

[justin-schroeder]

Hmm, are you 100% you're on 2.5.2? I noticed this bug too and wrote a test for it and fixed it in 2.5.2. If so, can you make a codesandbox with the behavior you're describing? Thanks!

[mfcodeworks]

Hmm, are you 100% you're on 2.5.2? I noticed this bug too and wrote a test for it and fixed it in 2.5.2. If so, can you make a codesandbox with the behavior you're describing? Thanks!

Sorry for the delay, definitely 2.5.2, got a codepen here with the exact same issue (I partially copied the same schema in my existing app). It has a few true/false default values, v-model binding comes up with just "" until interaction, then it becomes boolean

[justin-schroeder]

OK, I miss read your original post, that codepen was helpful. I'll mark this as a bug

[mfcodeworks]

OK, I miss read your original post, that codepen was helpful. I'll mark this as a bug

Any current workarounds? Beyond looping over schema and applying the values to config :/

[justin-schroeder]

ok, im still missing what youre saying. I thought you were saying the default value of single checkboxes should be false instead of "" but now i see youre saying to want to check or uncheck those values as default state. In that case, this is not a bug (although I still think the default state should be the boolean you passed in):

https://codepen.io/team/braid/pen/jOVRpee

Box inputs mirror HTML where the value attribute is the value of the input when checked. There's a note about this at the top of the documentation:

https://vueformulate.com/guide/inputs/types/box/

👍

[mfcodeworks]

Ahh I must have missed that, thanks for the info.

Is there a reason it doesn't automatically reflect in the v-model binding? Essentially, even with default values set (Either value or checked), unless a user interacts with each input, the value won't be reflected in the v-model. So having a form that should have a default checked checkbox, unless a user interacts with it it won't even be in the v-model binding that gets submitted

It would be great if setting value did actually reflect the checked value and immediately set in the v-model binding

[mfcodeworks]

Strange update; if I set value and checked props, true does reflect in the v-model binding, whilst false still results in just ""

https://codepen.io/mfcodeworks/pen/dyOapPe

It should still work because "" is falsy, but its strangely inconsistent

[justin-schroeder]

Yeah, it feels like you're narrowing in on a bug somewhere in here. The fact that box inputs use checked instead of value is an oddity that could have been overlooked in some of the model syncing logic. Personally I think it's right to model HTML/Vue, in this regard but maybe it's more confusing than beneficial, both to end users and us package authors.

[hisuwh]

Any update on this one? I'm passing in a boolean false to a form and internally its changing its value to empty string. If I toggle the checkbox on/off then it changes to false but otherwise this breaks my code