CODEWITHSUNDEEP
vue.jssymfony-3.4vee-validate
yvoloshin
yvoloshin

Reputation: 378

VeeValidate: "errors" does not exist in template

I'm trying to use VeeValidate to validate fields in a Vue form using Vue 2.5 and VeeValidate 2.1. Following the documentation, I'm validating a field like this:

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

This throws an error: Variable "errors" does not exist. This would imply that VeeValidate was not properly installed.

VeeValidate was installed using yarn add vee-validate and added at the top of the js file, before any other Vue code, like this:

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

Update: When I remove the span line that throws the error and examine this Vue instance using the Vue browser plugin (which shows all propertied and their values), I see that VeeValidate has automatically added two computed properties, errors and fields. Both are objects that look like this: 

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

I don't understand why errors is present as a computed property and yet can't be found in the template.

Upvotes: 0

Views: 936

Answers (1)

Hưng ho&#224;ng
Hưng ho&#224;ng

Reputation: 356

I see name data in v-model is "contact-email" but errors.has call "email" :

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

I think you should fix:

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

Upvotes: 1

Related Questions