Существует ли паттерн для оформления заказа на vue?

Question

[Александр Панков]

Здравствуйте, вопрос по шаблону проектирования мне кажется.

Есть страница оформления заказа

На ней мы видим поля (не все сразу а по мере заполнения клеинтов)
Например
- страна
- телефон
- город
- способ доставки
- время
..
..
- комментарий

Делаю оформление на vue.js

Идея следующая, что клиент как на Lamoda заполняет сперва страну, от этого мы пляшем и подгружаем маску телефон для его страны, далее он пишет свой номер, мы смотрим раньше был этот клиент у нас или нет, после он вводит город, по городу мы показываем ему доступные способы доставки….. вобщем одно вытекает из другого.
Те клиент как бы проходит по шагам оформления 1,2,3,4… просто снизу формы добавляем все новые и новые поля

Суть вопроса:
Дано: клиент ввел страну, телефон, город, способо доставки, в пункт выдачи заказ…
Потом: клиент меняет свой город…

Так вот, раз он поменял город, то нам нужно сбросит ВСЕ его заполнения до города, тк в новом городе и способы доставки другие и ПВЗ другое и время подачи…

А если он вообще дошел до конца оформлении и решил номер телефона изменить да на такой, который раньше у нас не был и нам нужно его авторизировать, те скрыть все поля доставки, времени, которые он заполнял и показать что-то иное.

Я начал делать через watch секцию во VUE, но быстро запутался…
Куча условий на то что сейчас заполнено, что нам нужно менять, что сбрасывать, код нечитабельный

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

Те мне нужно реализовать как-то ШАГИ (но они все на одном экране) и понятно понимать что именно клиент изменил, на каком шаге и что нужно сбросить из заполненного, без кучи IF

Comments

[Максим Федоров]

паттерн называется -- "не играй в Ламоду",
тк у тебя преимущество -- ты маленький и гибкий

[Максим Федоров]

а вообще State Machine тут поможет: состояния и куда после текущего можно перейти

Answer 1

[Илья Пономарев]

Можно наблюдатель на отдельное поле сделать

data: {
  order: {
     ...
      city: ''
     ...
  }
},

watch: {
  'order.city': function() {}
}

Документация https://ru.vuejs.org/v2/api/#watch