Field type=checkbox does not work properly with v-model

[milochristiansen]

Versions

• vee-validate: [email protected]
• vue: [email protected]

Describe the bug

When using <Field type="checkbox" v-model="checked"/> the value of checked will often be wrong. If it starts false, checking the box will set it to "on" (expected: true), unchecking will leave the value set to "on"! (expected: false) From this point on unchecking the box will set the value to "on" (expected: false) and checking it will set the value to "" (expected: true).

In the sandbox the behavior is a little different, there the v-model gets "stuck" to "on" no matter how many times you check or uncheck the box.

Replacing the Field tag with a simple input works exactly as expected.

To reproduce

1. Create a empty Vue 3 project with Vee Validate installed.
2. Add a Field with type="checkbox" and a v-model.
3. Examine the value of the v-model as you check and uncheck the box.

Expected behavior

The checkbox should set the v-model to the proper boolean values instead of... whatever you want to call its current behavior.

Demo link

Desktop:

• OS: Manjaro Linux
• Browser: Chrome
• Version: 86.0.4240.111

[logaretm]

Thank you for the detailed demo, it helped a lot. There was indeed a bug with the Field component without a wrapper Form in the case of checkboxes.

As a workaround you could wrap it in a virtual field like this:

https://codesandbox.io/s/vee-validate-checkbox-bug-forked-od4ud?file=/src/App.vue

I have fixed the issue and a release should be out shortly.

[milochristiansen]

👍 Thanks! I worked around the issue for now (I didn't actually need to use validation for that field, but I was using the component everywhere for consistency), but it is nice to know I can revert my work around when the next update hits.

[milochristiansen]

This issue appears to still be present in the latest version (4.2.4), albeit in changed form. Now the value is simply set to undefined and left at that. This behavior first appears in 4.1.4

(Wrapping a checkbox Field in another component (inside a Form) results in an issue very similar to this issue. I still need to investigate a bit more and write up a reproduction, but while working on that I revisited this issue and found out that it hadn't been fixed after all.)

[logaretm]

So now there are value and unchecked-value value props was introduced to the Field component, you would need to explicitly define them to get the correct behavior.

Feel free to build a reproduction and I will take another look, cheers!

[mas-iota]

So now there are value and unchecked-value value props was introduced to the Field component, you would need to explicitly define them to get the correct behavior.

Feel free to build a reproduction and I will take another look, cheers!

Hi, is this documented anywhere?

[demyan1411]

This bug is also reproduced with useField. In your custom checkbox example.
https://vee-validate.logaretm.com/v4/examples/custom-checkboxes/

Demo: https://stackblitz.com/edit/vee-validate-v4-custom-checkboxes-9r3jcv?file=src%2FApp.vue

[DevMojahed]

Thank you for the detailed demo, it helped a lot. There was indeed a bug with the Field component without a wrapper Form in the case of checkboxes.

As a workaround you could wrap it in a virtual field like this:

https://codesandbox.io/s/vee-validate-checkbox-bug-forked-od4ud?file=/src/App.vue

I have fixed the issue and a release should be out shortly.

Thanks bro, it worked for me