Vue3 Custom Checkbox not updating value

[erdemgonul]

Hi,

I created an custom checkbox component under Field element. I followed the documentation https://vee-validate.logaretm.com/v4/examples/checkboxes-and-radio in here but i couldnt produced the expected result. I attempt many different approaches to fix it but I dont know any other way about it.

I also made another Custom Components under Field and there were no problem when using them. Only problem appears on checkbox. Custom checkbox can get the correct initial state but clicking on checkbox not actually changing the value

I created an sandbox to show that issue ( It is minified version of my component to reproduce that problem easily )

https://codesandbox.io/s/vue3veevalidatecustomcheckbox-dn7c2

Any helps?

[logaretm]

You didn't bind the Field with v-model to change your x value. Also inside your checkbox, you didn't handle any events from the native input.

Here is some changes that make it work as expected:

https://codesandbox.io/s/vue3veevalidatecustomcheckbox-forked-dijtv?file=/src/components/HelloWorld.vue

[erdemgonul]

Thank you!

But I still couldnt get why we gave v-model and value attributes at the same time on component?

Also, in Field element why we gave :value="true" ?

If you can explain a bit i can send a pr on vue3 documentation about that topic ofc if you want

[logaretm]

Well :value is just one way binding, you didn't handle the other way which can be done by either @change or v-model.

The checkbox's "value" isn't that its checked or not. It's if the checkbox value matches the current input value. So they are separate, in your code they were used as the input's value and model at the same time which isn't correct.

Usually checkboxes have the following state:

• checked-value or value: the model value when its checked
• unchecked-value: the model value when the the input gets unchecked
• modelValue the current value of the checkbox
• checked: this is a computed state, true if modelValue === value

As you can see, checkboxes are more complex than other inputs which is why you need to handle these states. I don't think vee-validate should document that, if you are creating a custom checkbox input you need to be aware of this concept.

[hi-reeve]

Well :value is just one way binding, you didn't handle the other way which can be done by either @change or v-model.

The checkbox's "value" isn't that its checked or not. It's if the checkbox value matches the current input value. So they are separate, in your code they were used as the input's value and model at the same time which isn't correct.

Usually checkboxes have the following state:

• checked-value or value: the model value when its checked
• unchecked-value: the model value when the the input gets unchecked
• modelValue the current value of the checkbox
• checked: this is a computed state, true if modelValue === value

As you can see, checkboxes are more complex than other inputs which is why you need to handle these states. I don't think vee-validate should document that, if you are creating a custom checkbox input you need to be aware of this concept.

i think you should document this concept. as for me like i'm a newbie in this all custom component and i try to build a custom checkbox because what we needed is custom design, and using vee-validate this will be easier with all the validation thing, i can't find why my checkboxes is not working and also it doesn't documented in the vee-validate documentation either, and im ended up here. so it will be good to have that documented.