如何停止在 Vuetify 中显示内联验证错误消息？

Question

当用户单击“提交”（不与输入元素内联）时，我需要在表单顶部的一个警报中显示所有表单验证错误。

如果我使用 Vuetify 和 Vee-Validation，如何抑制内联验证错误消息。（我将使用 $errors 数组在警报中显示错误）。文档中没有任何关于此的内容。

我尝试不在错误消息中传递任何内容，但随后我在无效字段上丢失了红色轮廓。

我的字段是这样配置的

<v-text-field
     v-validate="'required|email'"
     v-model="email"
     :error-messages="errors.collect('email')"
     label="Email Address*"
     data-vv-name="email"
     required
     outline>
</v-text-field>

Answer 1

您还可以这样做hide-details="auto"，它指示 Vuetify 默认隐藏内联错误消息，并仅在实际存在错误时才显示它们。

Answer 2

如果您不需要使用输入组件显示任何“提示”，则可以将 hide-details 设置为 true。

我希望有一种方法可以隐藏错误消息而不干扰提示。

  <v-text-field
    v-validate="'required|email'"
    v-model="email"
    :error-messages="errors.collect('email')"
    label="Email Address*"
    data-vv-name="email"
    hide-details=true
    required
    outline>
  </v-text-field>