Array checkbox error on edit page.

[shankhadevpadam]

I have a dynamic array check box input. Which value comes from API. There is an error on the edit page where I want to check the value checked by the user on the registration.

Vue template

<Form @submit="submit" :initial-values="initialValues" :validation-schema="schema" v-slot="{ errors }">
<label class="inline-flex items-center mt-2 mr-2" v-for="(service, index) in services" :key="index">
   <Field v-model="userServices" type="checkbox" name="services" :value="service.slug" class="form-checkbox h-5 w-5 text-indigo-600" />
   <span class="ml-2 text-gray-700">{{ service.name }}</span>
</label>
<ErrorMessage name="services" class="block text-sm text-red-500 mt-1" />
</Form>

Yup

const schema = Yup.object({
  services: Yup.array().test({
    name: "service_test",
    exclusive: true,
    message: "Please select at least one service.",
    test: (value) => value.length > 0,
  }),
})

<script setup>
import { onMounted, ref } from 'vue'
import { Field, Form, ErrorMessage } from 'vee-validate'

const userServices = ref([])
const services = ref([])

const initialValues = {
  state: 'wa',
  services: [],
  primary_email: 'personal',
}

onMounted(() => {
services.value = (await Api.get('services-all')).data
})

const submit = (values) => {
}
</script>

And my problem is when I hit the edit page my saved valued in not checked.

[logaretm]

Could you simulate this in a codesandbox?

[shankhadevpadam]

https://codesandbox.io/s/edit-form-10o4p?file=/src/App.vue

this is my problem if I remove the initial value then I got a yup error. How to selected the value in edit page.

[logaretm]

The default values are undefined so you should check before accessing the .length prop

https://codesandbox.io/s/edit-form-10o4p?file=/src/App.vue

Another approach is to set the initialValues in the mounted hook or use setValues or resetForm({ values: users });` with the API response.

This will be fixed in 4.5 as the alpha releases should work fine with your example.

[shankhadevpadam]

Thanks @logaretm

[shankhadevpadam]

@logaretm after upgrading the new version I got same issue.