Add automatic error rendering

Versions:

• VueJs: #.#.#
• Vee-Validate: #.#.#

Description:

Add automatic rendering of errors, and an optional attribute to disable that. For example writing

<span
                                    class="text-danger"
                                    v-show="errors.has('timerecord.id_projects')">
                                        {{ errors.first('timerecord.id_projects') }}
                                </span>

is quite tedious, it would be awesome if this would be automated. Then an input where custom error showing is needed can have a flag like data-custom-error=“true” which would make the developer show the error how he wants to.

Steps To Reproduce:

[logaretm]

I have implemented a small draft for the error display component which is a functional component similair to router-link and transition, I will work on finalizing its API and maybe add in more features. The current usage looks like this:

import { ErrorComponent } from 'vee-validate';

Vue.component('vv-error', ErrorComponent);

<input name="field" type="text" v-validate="'required'">
<vv-error for="field"></vv-error>

[logaretm]

Well I though I could address #1191 since I have more control over the displaying behavior, plus we get the richer API of custom components over directives, for example slots, more declarative, custom templates, easier reactivity setup, etc…

So far I haven’t decided on the features to include in the next release but these are the ones I have thought about:

• Caching messages for better performance.
• Custom template (default is a span tag).
• Multiple Error display (default is single).

feel free to suggest more since a lot can be done with a component.