How to prevent multiple form submissions in Vue.js

The easiest way to prevent multiple form submissions in Vue.js is to use an HTML <button> disabled attribute to make a form button un-clickable. It’s a boolean attribute, we can set it to true right after the form submit.

Here is an HTML syntax:

<button type="button" disabled>Click Me!</button>

Now let’s tweak our form tag and add a Vue.js part.

<form @submit="submitForm">
  <button type="submit" :disabled="isLoading">Log in</button>
</form>

As you can see we now have a Vue.js submit handler and a disabled attribute, which will make a button un-clickable if isLoading is set to true.

Now let’s add a very primitive submitForm method. In the real-life example, there will be a form validation method, we’re going to skip that in this tutorial.

new Vue({
  el: "#app",
  data: {
    isLoading: null
  },
  methods: {
    submitForm (e) {
      e.preventDefault();
      this.isLoading = true
      
      setTimeout(() => {
      	this.isLoading = false
      }, 1000)
    }
  }
})

Our method will be called immediately on form submission. It will set the isLoading variable to true and after 1 second it will set it to false. This is done for demo purposes.

Now let’s see the final result.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/prevent-multiple-form-submissions-in-vue-js

PS: Make sure you check other Vue.js tutorials, e.g. how to prevent multiple form submissions in Vue.js, how to dynamically create a drop-down list in Vue.js, get filtered items in Vue.js/Vuex/ES6 using getters.