- This is my solution to the Multi-step form challenge on Frontend Mentor.
- After watching few Vue.js basics tutorials, I wanted to do a project to apply some concepts I learned, before I continue with the tutorials.
- I did not pay (a lot of) attention to responsiveness, which is something that could be improved in the future, as well as a form validation.
- Update: I wanted to do a refactoring of the code. I am aware that my new solution is certainly not the best but I do like learning this way.
Users should be able to:
- Complete each step of the sequence
- Go back to a previous step to update their selections
- See a summary of their selections on the final step and confirm their order
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Receive form validation messages if:
- A field has been missed
- The email address is not formatted correctly
- A step is submitted, but no selection has been made
The Vue concepts that were applied in this project are:
- Options API
- Creating Vue Components
- Props
- Data bindings
- List rendering
- Conditional rendering
- Dynamic Classes (css)
- Emitting custom events
- Computed Properties
- Very simple form and using v-model for two-way data binding
- The lifecycle hook mounted()
- I put some thought into how to manage my data. I wanted to have a separate file for my static data (array of plans, array of addons...) . For this purpose I used reactive() to create a reactive object inside new store.js file. This object then can be imported where it’s needed.
- In App.vue I wanted to have some kind of “global” data that is being passed to other components and that enables interaction with my project (moving between steps, a user making selections...) . I also wanted to have all the data made by a user in one place hence inside App.vue I created userSelection object.
- I learned an important difference between computed properties and watchers. Computed getter functions should only return a value and be free of side effects. If I need side effects in reaction to reactive state changes I should use watchers.
- When watching for ‘userSelection.addonsList’, the array addonsList stays the same, only the elements inside of it change. To be able to watch for these changes we need to use deep: true. If we compare the new value that we get with the old one using the strict equality we get true. I believe this has to do with reference values of arrays.
- When thinking about reactivity it's important to recognize what is our reactive state and what should happen when that state changes (side effects).
- Instead of using watchers when selected plan or selected addons change I probably could have written the necessary code when user interaction happens, that is when click event is emitted in App.vue