Дано:
Компонент - форма ввода.
Первые 3 поля для знакомства, 4-е - проверка кода допуска (в нашем API это get-запрос)
Если проверка проходит, компонент отдает наверх $emit - событие, по которому страница вызывает сохранение информации в CRM (в нашем API это post-запрос).
Как себя ведет система:
1. Если код не введен вообще - стандартная проверка на заполнение поля. До API дело не доходит, и не должно. Все Ок.
2. Введен заведомо неправильный код - axios обращается к API 2-3 раза минимум... даже визуально видно, как статус ошибки с кодом 0 (то есть вообще, по сути, не получен ответ) меняется на "Код не найден в базе". В принципе, итоговый результат меня устраивает. Сменяющиеся быстро надписи ошибочного статуса даже придают визуальную серьезность проверке - считал бы, ок, если бы не дальнейшее....
3. После 2 (последовательность важна!) вводим правильным код - поле ввода подсвечено зеленым, ошибочных статусов под полем нет - но и правильное поведение система не отрабатывает. Когда я тут повторно нажимаю кнопку "Отправить" (не меняя абсолютно ничего) - тогда проверка проходит и срабатывает v-if для отображения успешности. Но тут проблема не в реактивности - до смены признака дело просто не доходит (смотрел под отладчиком).
4. А вот теперь меняем порядок ввода. Сначала я ввожу правильный код. Поле ввода окружено зеленой рамкой т=и без указания ошибок - но и страница не перегружается, до смены значения признака v-if дело не доходит. Если теперь на этом моменте я меняю код на неправильный - отрабатывает не вариант "Код в базе не найден", а вообще ошибка проверки/сервера и срабатывает та ветка v-if, которая аварийная (заодно и косвенная проверка того, что реактивность работает корректно).
Пока что не получается понять, что не так ..... обращаюсь к коллективному разуму.
Пример фрагмента кода (вызов компонента и код вызова axios-post) приведен
https://jsfiddle.net/LouDminsk/0ztmvp4u/2/ - целиком если надо, чтобы посмотреть под отладчиком со стороны, могу дать ссылку
P.S. Да, я не описал, как же мне надо, чтобы работало - но, мне кажется, это очевидно! Если код не введен - п.1 (он работает). Если код неверный - проверка кода не проходит, страница не перегружается (почти п.2, если не считать нескольких вызовов). Если код правильный - без дополнительного нажатия срабатывает v-if и показывается часть шаблона для правильного ответа. При этом ничего от порядка ввода (пустой-неправильный-правильный) не зависит. То есть так, как вы сами бы хотели, чтобы вела себя система, когда вам надо заполнить какую-то форму с проверкой данных :)
Update #1: Я посмотрел поведение системы при вводе неправильного кода сразу после правильного (п.4 выше). Отбивка (и вызов "аварии" идет в функции, которая вызывается по emit - то есть такое впечатление, что компонент повторно не проверяет данные; но опять же это не так, потому что на пустое поле вместо кода он реагирует исправно - а эта проверка проводится только самим компонентом, за шаг до того, как должен проверять существование кода.
Средний
Средний