Django + Vue.js. Как лучше организовать форму с мульти шаговым заполнением?

Question

[Vic Shóstak]

Доброго дня!

Вопрос: как лучше всего организовать пошаговую форму, которую заполняет посетитель сайта? Интересует именно техническая сторона – через Django (с сохранением в сессию шагов) или Vue.js (полностью на клиенте). Может есть юзкейсы или бэст практисы? Просто не могу никак сообразить, как лучше сделать...

Поля формы зависят друг от друга, то есть каждый следующий шаг генерится, исходя из того, что пользователь выбрал в предыдущем. Например, вот такое дерево:

ШАГ 1: Тип визы
1.1. Бизнес
1.2. Туристическая

ШАГ 2: Если Бизнес
2.1. ФИО и прочая общая инфа
2.2. Данные о работе и бизнесе
2.3. Инфа о принимающей стороне
... (ещё 10+ полей, только для бизнес)

ШАГ 2: Если Туристическая
2.1. ФИО и прочая общая инфа
2.2. Название и адрес гостиницы
2.3. Данные о предыдущих тур. визах
... (ещё поля, только для туристических)

ШАГ 3: Выбор способа оплаты (не зависит от предыдущего выбора) и переход на агрегатор для оплаты
ШАГ 4: (редирект с агрегатора) Страница "Спасибо за оплату и бла бла бла"

ADD: Все поля, кроме 2.1, в шаге №2 будут записываться в Postgres в виде JSONField().

Буду рад толковым комментариям. Спасибо.

Answer 1

[Evgeny Kulakov]

Чисто vue решение:
Создаете json файл со списком шагов, полей, описываете в нем логику переходов.
При заходе на страницу, получаете этот файл, парсите, строите поля, прогрессбар и т.д.
Тут надо быть готовым к перезагрузке страницы, и возможно, сохранять промежуточные данные в localstorage например.

Comments

[Vic Shóstak]

Спасибо за ответ. А вот такую штуку не использовали, случаем? statemachine.davestewart.io/html/examples/vue/vue-...

[Evgeny Kulakov]

Не доводилось, но выглядит интересно. Если много подобных форм, то имеет смысл попробовать имхо. Но состояние не сохраняется вроде, нужно допилить будет.

[Vic Shóstak]

Evgeny Kulakov: а не тыкните носом, пожалуйста, в документацию, где про сохранение состояния написано ;)

[Evgeny Kulakov]

Vikky Shostak: ни где) просто когда страницу перезагружаешь, то текущее состояние не сохраняется и в доке вроде ничего про это нет.

[Vic Shóstak]

Evgeny Kulakov: это, я так понял, через Vuex делается?

[Evgeny Kulakov]

Vikky Shostak: vuex - это библиотека управления состоянием приложения. Она позволяет хранить в одном месте все что может понадобиться вашим компонентам в процессе работы, она обладает реактивностью. Она упрощает/стандартизирует взаимодействие между компонентами/сервисами и т.п. когда их много.
Я же немного про другое:
Представьте, что у вас есть роут, например example.com/newform, открываем его, на нем форма с множеством состояний, заполняем форму, на каком-то шаге перезагружаем страницу - все сбросилось, состояние не сохранено. Если вы хотите этого избежать, нужно где-то сохранять данное состояние, чтобы при перезагрузке страницы можно было сразу попасть на нужный шаг и не потерять все данные. Если это не критично, то можно забить. Vuex тут не спасет, он хранит данные в js и все сбросится при перезагрузке.