Vee-validate: Custom Component with vee-validate

[VitorTakara]

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.25

Description:

I have a custom component. It is a input with a characteres counter, and i tried to put vee-validate inside this input. I want to show errors when Form is Submited. I followed every step in vee-validate document, but it did not work. My form submits itself ignoring any input's error.

Steps To Reproduce:

Create a custom component using vee-validate

CODE:

Parent.vue

   <vue-input maxlength="20" minlength="3" placeholder="works"
    validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>

Component.js

Vue.component('vue-input', {
    props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
    template: `<div>
              <div class="input-group">
                <input type="text" :name="name" :value="value" 
                @input="$emit('input', $event.target.value); 
                counter = $event.target.value.length" 
                :maxlength="maxlength" :placeholder="placeholder" 
                v-validate="validate" 
                :class="{'is-danger': errors.has(name), 'form-control' : true}">

                Erros: {{errors}}
                <span class="input-group-addon">
                    {{ maxlength - counter }}
                </span>

                <span v-show="errors.has(name)" class="text-danger m-t-xs">
                    {{ errors.first(name) }}
                </span>
             </div>
             </div>`,
             data: () => ({
                 counter: 0
             })
});

[logaretm]

Because your form doesn't know about the errors inside your component, you can either store each field valid status with a prop.sync binding, or inject the parent validator into its children instead.

http://vee-validate.logaretm.com/advanced#injection

Here is the updated example:

https://jsfiddle.net/9o5wsfm1/

[VitorTakara]

Thankss!!