Проблема VueJS vee-validate при передаче валидации в качестве реквизита для входного компонента

Я создаю компонент ввода для работы с vee-validate.
для большего удобства я хочу использовать правила проверки как опору для этого.

Когда я использую v-model directive для родительского элемента, все в порядке. но со свойством value; после записи в поле и проверки входное значение сбрасывается до его родительского.
Это логично? Если нет, как я могу решить эту проблему без v-model?

Обратите внимание, что:

1) - событиями проверки являются 'input' и 'blur'

2 ) - я никогда не хочу устанавливать событие v-on:input для родительского элемента


Просмотреть эту скрипку





vue.js vuejs2 vue-component vee-validate
person Javad Ebrahimi    schedule 15.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это логично. @input="$emit('input', $event.target.value)" здесь бесполезен, потому что вы не слушаете событие ввода.

Если введенные вами данные недействительны, компонент снова перерисовывается. value компонента ввода никогда не менялось при вводе. При повторном рендеринге будет отображаться правильное значение, переданное от родителя.

https://jsfiddle.net/787g7q0e/

person ittus    schedule 15.05.2018
comment
Спасибо брат. Однако, возможно, единственный способ справиться с этим - использовать параметр data для такого компонента: localValue: this.value, который будет обновляться при собственном событии ввода. Есть идея получше? - person Javad Ebrahimi; 16.05.2018
comment
Приведенное выше решение решает проблему, Обновленный скрипт. но почему все входные компоненты перерисовываются после ввода любого из них? Из-за инъекции? - person Javad Ebrahimi; 16.05.2018