Vue.js BootstrapVue Prevent Button Double Click (Disable) and Show Loading on Click

Apr 15, 2020
<template>  <b-form inline class="justify-content-center" ref="form" @submit.prevent="submit">    <b-form-group label="Email" label-sr-only label-for="input-email">      <b-input          v-model="email"          id="input-email"          placeholder="Your email"        ></b-input>      <b-button type="submit" variant="primary" :disabled="loading"><b-spinner small v-if="loading"></b-spinner> Request Invite</b-button>    </b-form-group>  </b-form></template><script>export default {  data() {    return {      email: null,      loading: false    }  },  methods: {    submit() {      this.loading = true      // do something      this.loading = false    }  }}</script>

❤️ 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.