Use vee-validate flags with Vuetify errors.collect

Question

I am using Vee Validate with Vuetify like this:

<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>

I want to use some field flags shown in the docs like this:

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

I want to use the built in Vuetify form errors since they look nice but can not seem to get the flags to work. I have tried:

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

This clearly is not correct. Any ideas?

Edit

I have added a code pen example, you will notice that as soon as you start typing in the email field you get an error in the confirm email field. What I am trying to do is only show the error if the field has an error and has been touched/changed. https://codepen.io/tjquinn/pen/gKrVdX?&editors=101

Toodoo Toodoo · Accepted Answer · 2018-06-05T07:49:40

Have you tried to rename your fields bag when adding VeeValidate to Vue in your main.js ? Sometimes conflicts happen whit global name fields.

I do it this way, in my main.js :

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

and in my code I add the prop data-vv-scope="myFormName" and access it like this :

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

Use vee-validate flags with Vuetify errors.collect

Edit

1 Answers