CODEWITHSUNDEEP
vue.jsvuejs2bootstrap-vue
burmkiller
burmkiller

Reputation: 51

How to prevent a submit button on a form to be clicked multiple times in VUEJS

I want to prevent users from clicking on the submit button multiple times. How would I accomplish that in the following template and script?

Excerpt of template:

<form @submit.prevent="onSubmit">
  <b-button
            v-on:click="disable"
            variant="danger"
            type="submit"
          >
          Compléter
  </b-button>
</form>

..and script:

onSubmit() {
  this.$v.status.$touch();
  if (!this.$v.$invalid) {
    /////
  }
},

Upvotes: 1

Views: 2363

Answers (1)

tony19
tony19

Reputation: 138276

You could set a Boolean flag (e.g., named submitting) that disables the button during the form submission process. The <b-button> supports a disabled state with the disabled attribute, which could be bound to submitting:

<b-button :disabled="submitting">Compléter</b-button>

Example:

<template>
  <form @submit.prevent="onSubmit">
    <b-button :disabled="submitting">Compléter</b-button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      submitting: false,
    }
  },
  methods: {
    async onSubmit() {
      if (!this.submitting) {
        this.submitting = true
        try {
          await this.longSubmit()
        } finally {
          this.submitting = false
        }
      }
    }
    //...
  }
}
</script>

demo

Upvotes: 4

Related Questions