使用 v-for 验证和 vuetify 复选框组

问题描述

我对 vee-validate、vuetify 和 v-for 有一些问题。 有我的代码：

<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>

预期的结果是什么？

我有一个复选框组。我想如果所有复选框都未选中，则会出现一条错误消息。

发生了什么事？

如果我没有在 v-for 循环的第一次迭代中单击一次，则不会触发错误。

感谢您的帮助。

解决方法

默认情况下，Validationprovider 不会在呈现表单时立即验证，而是仅在触摸该字段时才进行验证。您可以使用 immediate 道具在渲染时验证该字段：

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