Vee-validate not updating the BootstrapVue Switch Checkbox state

[SaqibSyed1014]

What happened?

I'm using vee-validate on a BootstrapVue Switch Checkbox with yup schema like this.

  <Form :validation-schema="schema" :initial-values="initialValues" ref="form">
       <Field name="isActive" type="checkbox" v-slot="{ field }" :value="true" :unchecked-value="false">
          <b-form-checkbox"  v-bind="field" v-model="field.checked" switch> Is Active</b-form-checkbox>
        </Field>

         <LoadingButton type="submit" :loading="loading" :disabled="!canProceed">Save</LoadingButton>
  </Form>

In the script,

const initialValues = ref({
  isActive: props.data?.isActive || false,
});

const schema = yup.object({
  isActive: yup.boolean().required()
});

const canProceed = computed(() => {
  const { dirty, valid } = form.value?.getMeta?.() || {};
  return dirty && valid;
});

The field slot prop but the checked key in it is preventing the switch checkbox from toggling as it's always true and not being updated by v-model. I also tried changing the checked key in field slot prop by adding @change on switch checkbox but it's also not working.

It'd be great if someone could guide me to a correct solution to this issue if it's not new. Thanks.

Reproduction steps

1. 2. 3. ...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• [ ] Firefox
• [ ] Chrome
• [ ] Safari
• [X] Microsoft Edge

Relevant log output

No response

Demo link

/

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[logaretm]

checked is a computed property and shouldn't be used like that with v-model. I'm not sure it was suggested anywhere in the docs.

You should use componentField binding from the slot props instead:

<Form :validation-schema="schema" :initial-values="initialValues" ref="form">
     <Field name="isActive" type="checkbox" v-slot="{ componentField }" :value="true" :unchecked-value="false">
        <b-form-checkbox"  v-bind="componentField" switch> Is Active</b-form-checkbox>
      </Field>

       <LoadingButton type="submit" :loading="loading" :disabled="!canProceed">Save</LoadingButton>
</Form>

Here is an example.

There is also an official example with the recommended approach.