javascript - 防止表单多次提交

Question

我尝试使用 vuejs 创建一个最终使用 axios 的表单执行 POST 请求。但是，提交按钮在表单验证期间不会禁用。我试图阻止用户多次提交...

重现代码:

<div>
    <form @submit.prevent="checkForm">
    <input
        type="submit"
        :disabled="submitting"
        :value="value"
    >
</div>

地点:

checkForm( e ) {
    this.submitting = true;
    this.value = 'Submitting';

    // Form Validation

    this.submitting = false;
    this.value = 'Submit';
}

Answer 1

从评论来看，听起来您正在发出异步请求(在 axios.post() 中)并立即设置 this.submitting 和 this .value 而无需等待网络请求的结果，类似于此示例:

checkForm( e ) {
  this.submitting = true;
  this.value = 'Submitting';

  axios.post('https://foo');

  this.submitting = false;
  this.value = 'Submit';
}

由于 axios.post() 是异步的(即返回 Promise )，因此后面的行会在 POST 请求发生之前执行。您可以将这些设置移至 then axios.post()的回调:

checkForm( e ) {
  this.submitting = true;
  this.value = 'Submitting';

  axios.post('https://foo').then(() => {
    this.submitting = false;
    this.value = 'Submit';
  });
}

或者您可以使用async/await像这样:

async checkForm( e ) {
  this.submitting = true;
  this.value = 'Submitting';

  await axios.post('https://foo');

  this.submitting = false;
  this.value = 'Submit';
}

demo