Используйте флаги vee-validate с Vuetify errors.collect

Question

Я использую 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

Answer 1

Вы пытались переименовать ваш fields bag при добавлении VeeValidate в Vue в вашем main.js?Иногда возникают конфликты с глобальным именем fields.

. Я делаю это таким образом, в моем main.js:

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

и в своем коде я добавляю опору data-vv-scope="myFormName" и доступэто так:

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