gistfile1.txt

<template>
    <div>
        <form @submit.prevent="onSubmit" class="mt-4 sm:flex sm:max-w-md">
            <input
                aria-label="Email address"
                type="email"
                name="email"
                v-model="form.email"
                required
                class="appearance-none w-full px-5 py-3 border border-transparent text-base leading-6 rounded-md text-gray-900 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 transition duration-150 ease-in-out"
                placeholder="Enter your email"
                @click="errors.clear('email')"
            />
            <div
                class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0"
            >
                <button
                    class="w-full flex items-center justify-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue-500 hover:bg-indigo-400 focus:outline-none focus:bg-indigo-400 transition duration-150 ease-in-out"
                    type="submit"
                    :class="loading ? 'loader' : ''"
                >
                    Subscribe
                </button>
            </div>
        </form>
        <p class="text-red-500" v-text="errors.get('email')"></p>
    </div>
</template>

<script>
import { Errors } from "../Plugins/Errors.js";
export default {
    data() {
        return {
            form: {
                email: ""
            },
            loading: false,
            errors: new Errors()
        };
    },
    methods: {
        onSubmit() {
            axios
                .post("/api/newsletter", this.form)
                .then(response => {
                    this.resetForm();
                    this.showAlert();
                })
                .catch(error => {
                    this.errors.record(error.response.data.errors);
                });
        },
        resetForm() {
            console.log("Reseting the form");
            var self = this; //you need this because *this* will refer to Object.keys below`

            //Iterate through each object field, key is name of the object field`
            Object.keys(this.form).forEach(function(key, index) {
                self.form[key] = "";
            });
        },
        showAlert() {
            this.$swal({
                title: "Awesome!, Message Sent",
                text: "Please check your email.",
                icon: "success"
            });
        },
        showError() {
            this.$swal({
                icon: "error",
                title: "Ooops!",
                text: "Please check your address."
            });
        }
    }
};
</script>

<style>
.loader {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}

.loader:after {
    animation: spinAround 500ms infinite linear;
    border: 2px solid #dbdbdb;
    border-radius: 290486px;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    position: relative;
    position: absolute;
    left: calc(50% - (1em / 2));
    top: calc(50% - (1em / 2));
    position: absolute !important;
}

@keyframes spinAround {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
</style>