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

Question

我对 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 循环的第一次迭代上单击一次，则不会触发错误。

感谢您的帮助。

Answer 1

默认情况下，Validationprovider 不会在表单呈现后立即进行验证，而只会在字段被触摸时进行验证。您可以使用immediate 属性使该字段在渲染时被验证：

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