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

April 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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.