Как обеспечить корректную работу валидации при перезагрузке страницы и наладить связь между props и localStorage?

В данном примере, в функции getValidatePanels, я получаю с сервера валидацию для конкретных полей и вывожу её в шаблон. В шаблоне, при первой загрузке страницы, рендерится сначала propList: props.personalDetailsPanelArr. При расфокусировке валидация отрабатывает при пустом поле. Проблема заключается в том, что после перезагрузки страницы рендерится уже storedList: storedPersonalDetailsList, т.е. данные из хранилища, и валидация больше не отрабатывает. Видимо, это происходит из-за того, что "источник правды" для валидации является массив propList, в то время как в шаблоне рендерится storedList. Как можно решить данную задачу? Я искренне запутался в том что сделал.

Ссылка на песочницу: https://replit.com/@teplandrey41/ValidationForm#src/components/BaseForm.vue

P.S. Удалите из хранилища "ключ: значение" personalDetailsEducationPanels, чтобы изначально отрендерился propsList, в котором удачно выводится "error" при пустых полях.


Ответы (1 шт):

Автор решения: msk

Делайте предварительную валидацию вводимого пользователем на стороне клиента, используя Vue - не будет нагрузки на сервер (для многопользовательского сайта).

И, конечно, упростите себе жизнь с контролем текущего состояния полей! Используйте Provide/Inject для обмена данными между компонентами.

→ Ссылка