VueJS vee-validate issue when passed validation as props to input component

Question

I'm building an input component to work with vee-validate.
for more convenience, I want to use validation rules as a props for this.

Every thing is ok when I use v-model directive on parent. but, with value property; after writing in the field and validating, input value reset to it's parent.
This is logical? if not, how can I solve this problem without v-model?

Note that:

1) - Validations events are 'input' and 'blur'

2) - I never want to set v-on:input event on parent

See This Fiddle

ittus · Accepted Answer · 2018-05-15 13:51:23Z

2

This is logical. @input="$emit('input', $event.target.value)" is useless here because you don't listen to the input event.

When your input is invalid, component is re-render again. value of input component has never change changed when you input. When it re-render, it will display correct value which is passed from parent.

https://jsfiddle.net/787g7q0e/

answered May 15, 2018 at 13:51

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Javad Ebrahimi Over a year ago

Thanks bro. However, perhaps the only way to handle it, is to use data option on component like this: localValue: this.value, which will be updated on native input event. Is there a better idea?

Javad Ebrahimi Over a year ago

The solution above solves the problem, Updated Fiddle. but why all input component re-redered after inputing any of them? Because of injection?

Collectives™ on Stack Overflow

VueJS vee-validate issue when passed validation as props to input component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related