ajax.js

import helpers from './helpers.js';

/**
 * Ajax directive to easily submit vue forms via ajax
 *
 * @author James Kirkby <jkirkby91@gmail.com>
 */
export default {

    params: ['complete'],

    /**
     * bind the function to the submit button
     */
    bind: function () {
        this.el.addEventListener(
            'submit', this.onSubmit.bind(this)
        );
    },

    /**
     * onSubmit event function to send form data via ajax
     *
     * @param e
     */
    onSubmit: function (e) {
        e.preventDefault();
        let button = this.el.querySelector('button[type="submit"]');
        button.disabled = true;

        let callBackFunction = button.getAttribute('data-callback');
        console.log(callBackFunction);

        let payload = helpers.jsonEncodeObj(helpers.serializeForm(this.el));

        this.vm.$http[this.getRequestType()](this.el.action, payload)
            .then(function(response){

                let response_message = response.data.message;
                let message = '';
                if(typeof response_message === 'object')
                {
                    for (var key in response_message) {
                        if (response_message.hasOwnProperty(key)) {
                            message += key + " : " + response_message[key] + " <br> ";
                        }
                    }
                }
                else
                {
                    message = response.data.message;
                }

                if(response.data.status === 200)
                {
                    formInstance.reset();
                    // show success message here
                }

                button.disabled = false;

            })
    },

    /**
     * Gets the type of http request from the form
     */
    getRequestType: function () {
        var method = this.el.querySelector('input[name="_method"]');

        return (method ? method.value : this.el.method).toLowerCase();
    },
}