[Vuejs]-Having issues understanding flow – HTML form data handling by vue and axios

0πŸ‘

βœ…

Let me explain you the flow of the code you posted :

  • Once component mounted, The first method which is getting called is mounted(). In this method you are fetching the endopint binded to the action attribute in your form html element and binding that in a data variable via this.endpoint.
  • Now, you are calling validateForm() method on click of submit button to validate the input fields. If validation pass, you are calling sendFormData() method to make an POST API call.
  • After getting the response, you added a watcher on status to update the form.context value based on the status code you received from an API response.
  • At the end, you are calling a checkStatus() method on success of axios call and in this checkStatus() method you are again making an POST API call after every 10 seconds and following step 3.

0πŸ‘

  1. When the components is mounted, you run the form binded action on (submit?)

  2. The action is probably binded to the sendFormData function(in methods)

  3. Inside sendFormData, there is the setup of the axios request, followed be a then callback which handles the response from the request

  4. The checkStatus function is called inside the "then" block

  5. Sends the same data back to the server every 10 seconds if the previous response
    doesn’t have status code other than 200 or 500.

  6. ValidateForm is may binded to some onInput or onChange event on the template
    ** The watcher is always looking for the status code and updates a form context

Leave a comment