Having issues understanding flow - HTML form data handling by vue and axios

Question

I am new to Vue and Axios and trying to use it in Salesforce Marketing Cloud - Cloud pages. Basically there are 3 parts,

1. HTML + vue page : this is a form page, where the user is asked to input the automation name and click on send button
2. App.js : this is build using axios and Vue.
3. Form-hander.js (backend) : SSJS code that runs the automation.

I referred this document to build this setup -https://ampscript.xyz/how-tos/how-to-start-status-of-automation-from-marketingcloud-form/. I understand the Form-hander.js (ssjs) code and this can be skipped.

What I am not able to understand is the flow of App.js, could anyone please explain me what is happening here. I understand that on click of send button, the function in App.js - validateForm is called. Here after I don’t understand the flow of the code. From App.js is the form-handler code called ? OR the post method used in the HTML page is directly called the form-handler page and staring the automation?

Here is the code of app.js. Can some explain to me in simple terms the flow of this code, would be really helpful.

   new Vue({
    el: '#app',
    data: {
        status: 100,
        form: {
            name: 'My Test Automation',
            context: 'perform'
        },
        endpoint: '',
        message: ''
    },
    watch: {
        status: function () {
            if(this.status == 201 || this.status == 102) {
                this.form.context = 'check';
            } else {
                this.form.context = 'perform';
            }
        }
    },
    mounted: function() {
        this.endpoint = this.$refs.form.getAttribute('action');
    },
    methods: {
        sendFormData: function() {
            this.status = 101;
            var $this = this;
            axios({
                method: 'POST',
                url: $this.endpoint,
                data: $this.form,
                validateStatus: function() { return true }
            }).then(function(result) {
                $this.status = result.data.Status;
                $this.message = result.data.Message;
                $this.checkStatus();
            }).catch(function(error) {
                console.error(error);
            });
        },
        checkStatus: function() {

            var $this = this;
            var intervalID = setInterval(function() {
                axios({
                    method: 'POST',
                    url: $this.endpoint,
                    data: $this.form,
                    validateStatus: function() { return true }
                }).then(function(result) {
                    $this.status = result.data.Status;
                    $this.message = result.data.Message;
                    if($this.status == 200 || $this.status == 500) {
                        clearInterval(intervalID);
                    }
                }).catch(function(error) {
                    console.error(error);
                });
            }, 10000); 

        },
        validateForm: function() {
            if (this.$refs.form.checkValidity() !== false) {
                this.sendFormData();
            }
            this.$refs.form.classList.add('was-validated');
        }

    }
})

Answer 1

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.