【问题标题】：Use vee-validate flags with Vuetify errors.collect将 vee-validate 标志与 Vuetify errors.collect 一起使用
【发布时间】：2018-06-04 23:59:04
【问题描述】：

我正在使用 Vee Validate 和 Vuetify，如下所示：

<v-text-field
v-model="email"
type='email'
required
v-validate="'required|email'"
:error-messages="errors.collect('email')"
label="E-mail"
data-vv-name="email"
ref="email"
required
></v-text-field>

我想使用文档中显示的一些字段标志，如下所示：

<span v-show="errors.has('email') && fields.email.touched">{{ errors.first('email') }}</span>

我想使用内置的 Vuetify 表单错误，因为它们看起来不错，但似乎无法让标志工作。我试过了：

:error-messages="errors.collect('email') && fields.email.touched"

这显然是不正确的。有什么想法吗？

编辑

我添加了一个代码笔示例，您会注意到，一旦您开始在电子邮件字段中输入，您就会在确认电子邮件字段中收到错误消息。我要做的只是在字段有错误并且已被触摸/更改时才显示错误。 https://codepen.io/tjquinn/pen/gKrVdX?&editors=101

【问题讨论】：

标签： vuetify.js vee-validate

【解决方案1】：

在您的 main.js 中将 VeeValidate 添加到 Vue 时，您是否尝试过重命名您的 fields bag？有时会在全局名称fields 上发生冲突。

我是这样做的，在我的main.js 中：

Vue.use(VeeValidate, {fieldsBagName: 'formFields'})

在我的代码中，我添加了 prop data-vv-scope="myFormName" 并像这样访问它：

this.formFields['$myFormName']['keyName'].touched

【讨论】：

我试过你的解决方案，但它对我不起作用。我在上面添加了一个代码笔示例。