在Vuetify errors.collect中使用vee-validate标志

时间:2018-06-04 23:59:05

标签: vuetify.js vee-validate

我正在使用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

1 个答案:

答案 0 :(得分:0)

fields bag中将VeeValidate添加到Vue时,您是否尝试重命名main.js?有时冲突发生在全球名称fields上。

我这样做,在我的main.js

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

在我的代码中,我添加了道具data-vv-scope="myFormName"并像这样访问它:

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