Currently the code for register page and update user page are very similar -- this leads to a lot of duplicate code. If you want to make a change to one page you also have to remember to change it int the other component. It would be nice to only have one component where you only make the change once.
The only difference between the two components is the API endpoints they submit to. Let's create one shared form component that emits an event when the submit button is clicked. Then we can update the register page and update profile pages to call this shared form component and to listen to the button click event, and handle it accordingly with their corresponding api calls.
For update profile, we want the form to already contains the users information. So the form component can take a prop call prepopulateData that is either True or False. If its true, then it will make an API call to prepopulate the form with userData.
You can read this article to see how you can use emit to send information from a child component to the parent component: https://dev-notes.eu/2018/05/passing-data-between-vue-components/
Currently the code for register page and update user page are very similar -- this leads to a lot of duplicate code. If you want to make a change to one page you also have to remember to change it int the other component. It would be nice to only have one component where you only make the change once.
The only difference between the two components is the API endpoints they submit to. Let's create one shared form component that emits an event when the submit button is clicked. Then we can update the register page and update profile pages to call this shared form component and to listen to the button click event, and handle it accordingly with their corresponding api calls.
For update profile, we want the form to already contains the users information. So the form component can take a prop call
prepopulateDatathat is either True or False. If its true, then it will make an API call to prepopulate the form with userData.You can read this article to see how you can use
emitto send information from a child component to the parent component: https://dev-notes.eu/2018/05/passing-data-between-vue-components/