Vue.js Disable Button (Prevent Double Click) With Loading Animation During Network Request (Ajax)

Install FontAwesome Icon for Loading Animation

yarn add @fortawesome/fontawesome-svg-coreyarn add @fortawesome/free-solid-svg-iconsyarn add @fortawesome/vue-fontawesome
import { library } from '@fortawesome/fontawesome-svg-core';import { faSpinner } from '@fortawesome/free-solid-svg-icons';import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';library.add(faSpinner);Vue.component('font-awesome-icon', FontAwesomeIcon);

NOTE: Refer Using FontAwesome 5.1.x for Vue.js.

Install Axios for Ajax

yarn add axios

Vue.js Component

<template>  <div>    <form @submit.prevent="onSubmit" class="needs-validation" novalidate>      <div class="form-row  justify-content-md-center">        <div class="my-3">Join our early access program and be the first to experience the warmth of 暖心芽.</div>      </div>      <div class="form-row justify-content-md-center">        <div class="col-md-auto mb-3">          <label for="inputEmail" class="sr-only">Your email</label>          <input v-model="email" class="form-control" name="email" type="email" id="inputEmail" placeholder="Your email">        </div>        <div class="col-md-auto mb-3">          <button type="submit" class="btn btn-primary" style="position: relative;" :disabled="state.isSending">Request Invite <font-awesome-icon :icon="['fas', 'spinner']" pulse size="lg" style="margin: auto; position: absolute; top: 0;  bottom: 0; left: 0; right: 0; " v-show="state.isSending" /></button>        </div>      </div>    </form>  </div></template><script>import axios from 'axios'export default {  data() {    return {      email: '',      state: {        isSending: false      }    }  },  methods: {    onSubmit() {      this.save();    },    save() {      this.state.isSending = true;      axios({        method: 'post',        url: '/functions/request_invite',        data: {          email: this.email        }      })      .then((response) => {        this.state.isSending = false        const data = response.data        console.log(data)      })      .catch((error) => {        this.state.isSending = false        console.log(error)      });    }  }}</script>

NOTE: Refer Setup Bootstrap 4 with Vue Cli 3 for Form CSS.

NOTE: Refer Pre-launch Signup Email Component With VuePress/Vue.js and Cloud Functions for a more complete example.

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.