Как обеспечить корректную работу валидации при перезагрузке страницы и наладить связь между 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 шт):
Делайте предварительную валидацию вводимого пользователем на стороне клиента, используя Vue - не будет нагрузки на сервер (для многопользовательского сайта).
И, конечно, упростите себе жизнь с контролем текущего состояния полей! Используйте Provide
/Inject
для обмена данными между компонентами.