v-form.vue

<script>
    export default {
        name: 'v-form',
        props: [
            'route',
            'method',
            'data',
            'sync',
        ],
        data() {
            return {
                form: {},
                errors: {},
                schema: this.data,
                isLoading: false,
                isSubmitted: false,
                responseMessage: null,
            }
        },
        computed: {
            /** Validation Failed Computed Property **/
            validationFailed() {
                return Object.keys(this.errors).length > 0
            }
        },
        methods: {
            /** Set the loading state. **/
            formLoading(loading = true) {
                this.isLoading = loading
            },
            /** Submit the form (macro). **/
            submitForm() {
                this.isSubmitted = false
                this.clearErrors()
                this.formLoading(true)
                this.ajaxRequest()
            },
            /** Reset the form to the initial state. **/
            resetForm() {
                this.isSubmitted = false
                this.form = Object.assign({}, this.schema)
                this.clearErrors()
            },
            /** Async Axios Request. **/
            async ajaxRequest() {
                await window.axios.request({
                    method: this.method,
                    url: this.route,
                    data: this.form,
                }).then((response) => {
                    this.isSubmitted = true
                    this.syncMessage(response.data)
                    this.syncData(response.data)
                    this.$emit('success', this.form)
                })
                .catch((error) => {
                    this.isSubmitted = false
                    this.syncErrors(error)
                    this.$emit('error', error)
                })
                .finally(() => {
                    this.formLoading(false)
                })
            },
            /** Sync the message from the response. **/
            syncMessage(data){
                if (data.hasOwnProperty('message')) {
                    this.responseMessage = data.message
                }
            },
            /** Sync the data from the response. **/
            syncData(data){
                if (this.sync && data.hasOwnProperty(this.sync)) {
                    this.form = this.schema = Object.assign({}, this.form, data[this.sync])
                }
            },
            /** Sync the errors from the response. **/
            syncErrors(error) {
                if (typeof error !== 'undefined') {
                    if (typeof error.response !== 'undefined') {
                        if (error.response.hasOwnProperty('data')) {
                            if (error.response.data.hasOwnProperty('errors')) {
                                let errors = error.response.data.errors
                                for (let key of Object.keys(errors)) {
                                    errors[key].map((error, index) => {
                                        //Strip Dot Syntax from Field Names in Messages (for nested array fields)
                                        errors[key][index] = error.replace(key.replace(/_/g, ' '), key.replace(/[._]/g, ' '))
                                    })
                                }
                                this.errors = errors
                            }
                            this.syncMessage(error.response.data)
                        }
                    }
                }
            },
            /** Clear the Errors. **/
            clearErrors() {
                this.responseMessage = null
                this.errors = {}
            },
            /** Does a field have errors? **/
            hasErrors(field = null) {
                return field ? this.errors.hasOwnProperty(field) : this.validationFailed
            },
            /** Get a field's first error. **/
            getError(field) {
                return this.errors.hasOwnProperty(field) ? this.errors[field][0] : null
            },
            /** Get all the field's errors. **/
            getErrors(field) {
                return this.errors.hasOwnProperty(field) ? this.errors[field] : null
            }
        },
        created() {
            this.resetForm()
        },
    }
</script>
<template>
    <form ref="form" @submit.prevent="submitForm">
        <slot
            :data="{
                form: form,
                errors: errors,
                isLoading: isLoading,
                isSubmitted: isSubmitted,
                responseMessage: responseMessage,
                validationFailed: validationFailed
            }"
            :methods="{
                resetForm: resetForm,
                submitForm: submitForm,
                formLoading: formLoading,
                getError: getError,
                getErrors: getErrors,
                hasErrors: hasErrors,
                syncErrors: syncErrors,
                clearErrors: clearErrors
            }"
        ></slot>
    </form>
</template>