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

June 2, 2019

Install FontAwesome Icon for Loading Animation

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn 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 to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.

👶 Apps I built

Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
Travelopy - travel discovery and journal
LuaPass - offline password manager
WhatIDoNow - a public log of things I am working on now

By Desmond Lua

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

Tags: