Question

我想防止用户多次单击“提交”按钮。我将如何在以下模板和脚本中完成该任务？

模板摘录：

<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) {
    /////
  }
},

Answer 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

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

1 个答案: