如何防止表单上的提交按钮在 VUEJS 中被多次点击

【问题标题】：How to prevent a submit button on a form to be clicked multiple times in VUEJS如何防止表单上的提交按钮在 VUEJS 中被多次点击
【发布时间】：2020-05-23 03:38:04
【问题描述】：

我想防止用户多次点击提交按钮。我将如何在以下模板和脚本中实现这一点？

模板摘录：

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

..和脚本：

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

【问题讨论】：

您想在点击完成按钮时阻止提交吗？
是的，这正是我想要的

标签： vue.js vuejs2 bootstrap-vue

【解决方案1】：

您可以设置一个布尔标志（例如，名为submitting），在表单提交过程中禁用该按钮。 <b-button> 支持带有disabled 属性的disabled state，可以是bound 到submitting：

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

例子：

<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

【讨论】：