VeeValidate: ошибок в шаблоне нет

Я пытаюсь использовать VeeValidate для проверки полей в форме Vue с помощью Vue 2.5 и VeeValidate 2.1. Следуя документации, я проверяю такое поле:

<input class="form-control"
name="contact-email"
id="contact-email"
type="email"
v-model="contact-email"  
v-validate="'required|email'"
>
<span v-if="errors.has('contact-email')">{{ errors.first('contact-email') }}</span>

Это вызывает ошибку: Variable "errors" does not exist. Это может означать, что VeeValidate не был правильно установлен.

VeeValidate был установлен с использованием yarn add vee-validate и добавлен в начало js-файла перед любым другим кодом Vue, например:

import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

Обновление: когда я удаляю строку span, которая вызывает ошибку, и исследую этот экземпляр Vue с помощью плагина браузера Vue (который показывает все свойства и их значения), я вижу, что VeeValidate автоматически добавил два вычисленных свойства, errors и fields. Оба объекта выглядят так:

errors = { items: Array[0] }
fields = { student-contact-email: { changed: false, dirty: false, invalid: true, pending: false, pristine: true, required: true, touched: false,
untouched: true, valid: false, validated: false }}

Я не понимаю, почему errors присутствует как вычисляемое свойство, но его нельзя найти в шаблоне.


vue.js vee-validate symfony-3.4
person yvoloshin    schedule 14.06.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я вижу, что данные об имени в v-модели - это «контактный адрес электронной почты», но в файле error.s есть вызов «электронная почта»:

<span v-if="errors.has('email')">{{ errors.first('email') }}</span>

Думаю, стоит исправить:

<span v-if="errors.has('contact-email')">{{ errors.first('contact-email') }}</span>
person Hưng hoàng    schedule 14.06.2018
comment
Спасибо. Имена переменных в моем коде верны, но я допустил ошибку в сообщении. Я отредактировал пост, чтобы исправить ошибку и добавить обновление. - person yvoloshin; 15.06.2018