Reset custom checkbox error onSubmit

[JaavierR]

Hi, today I was working with vee validate and I had some problems with creating a custom checkbox of true and false, so I came across the solution to the problem in this issue (#3132 (comment)) proposed by @logaretm, which raises the solution and works perfectly.

But now I have the problem that when I want to reset the form, the values effectively change to their initial state, e.g., in that example remember_me takes the value of false if it was true, but visually the checkbox continues to signal that it is selected, I do not know if I'm missing something or it's some kind of bug?

Thanks in advance

[logaretm]

Can you create a codesandbox with this behavior you are seeing?

[JaavierR]

Yes here it is, I am displaying the values of the form to evidence the fact that when resetting the form after submitting it, the status returns to false, but the checkbox is still checked.

Making tests today I noticed that this behavior is solved if to the input of the component CustomCheckbox.vue the checkbox property is added and the variable that is extracted from the useField is passed to it, but I do not know if it is the appropriate way to solve it or there is a better solution to this.

// Actual solution that I found to avoid the undesired behavior

<template>
    <input
      type="checkbox"
      :value="value"
      :name="name"
      :id="name"
      @input="handleChange"
      :checked="checked"    
/>
</template>

<script setup>
import { useField } from 'vee-validate'

const { checked, handleChange } = useField(...)
</script>

[logaretm]

That is correct, you need to use checked property to bind it to the input as this way you give vee-validate control over it and it should reflect correctly after resets.

[JaavierR]

Nice, thanks for clarifying!