Vee-validate 和 vuetify checkbox group with 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 }"
>

Vee-validate 和 vuetify checkbox group with v-for

Vee-validate and vuetify checkbox group with v-for

vue.js

vuetify.js

vee-validate