Vue.js Disable Button (Prevent Double Click) With Loading Animation During Network Request (Ajax)
June 2, 2019Install 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.
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn