Vee-validate and vuetify checkbox group with v-for

Question

I have some problem with vee-validate, vuetify and v-for. There is my code :

<ValidationProvider
  name="availableLanguages"
  rules="required"
  v-slot="{ errors }"
>
  <v-row>
    <v-col
      cols="2"
      v-for="availableLanguage in availableLanguages"
      :key="availableLanguage.label"
    >
      <v-checkbox
        v-model="selectedLanguage"
        :label="availableLanguage.label"
        :value="availableLanguage.value"
        :error="errors.length > 0"
        hide-details
        @click="setDefaultLanguage"
        key="availableLanguage-input"
      />
    </v-col>
  </v-row>
  <v-row>
    <v-col
      cols="12"
      class="errorCheckBox"
    >
      {{ errors[0] }}
    </v-col>
  </v-row>
</ValidationProvider>

What is the expected result ?

I have a checkbox group. I want if all checkboxes are unchecked then an error message appear.

What's happened ?

If i don't click once on the first iteration of the v-for loop, the error is not trigger.

Thanks for help.

Answer 1

By default, the Validationprovider doesn't validate as soon as form is rendered, but only does it when the field has been touched. You can use immediate prop to make the field be validated when rendered:

<ValidationProvider
  name="availableLanguages"
  rules="required"
  immediate
  v-slot="{ errors }"
>