Is there a checkout pattern for vue?

Question

JavaScript

Hello, I think it's a design pattern question. There is a

checkout page On it we see the fields (not all at once, but as the

clients are filled in)
For example
- country
- phone
- city
- delivery method
- time
..
..
- comment Lamoda first fills in the country, from this we dance and load the phone mask for his country, then he writes his number, we look before we had this client or not, after he enters the city, we show him the available delivery methods around the city ... .. in general, one follows from the other.


Those client, as it were, goes through the registration steps 1,2,3,4 ... just add more and more new fields from the bottom of the form

The essence of the question:
Given: the client entered the country, phone number, city, delivery method, at the point of issue of the order ...
Then: the client changes his city ...

So, since he changed the city, then we need to reset ALL of his fillings to the city, maybe in the new city and the delivery methods are different and the pickup point is different and the filing time ...

And if he even reached the end of the design and decided to change the phone number, yes for one that we didn’t have before and we need to authorize it, hide all the delivery fields, the time that it filled out and show something else.

I started doing it through the watch section in VUE, but quickly got confused...
A bunch of conditions for what is now filled in, what we need to change, what to reset, the unreadable code

will be added over time, for example, the last paragraph of the design "wish for the order" and I will again climb into the code and do so that, when changing the first paragraphs, clear the following ones and that including “wish for order”, etc.

Those I need to implement somehow the STEPS (but they are all on the same screen) and it is clear to understand what exactly the client has changed, at what step and what needs to be reset from the filled one, without a bunch of IF

Answer 1

You can make an observer on a separate field

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

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

Documentation https://ru.vuejs.org/v2/api/#watch