防止表单多次提交

Question

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

\n\n

重现代码：

\n\n

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

\n\n

在哪里：

\n\n

checkForm( e ) {\n    this.submitting = true;\n    this.value = \'Submitting\';\n\n    // Form Validation\n\n    this.submitting = false;\n    this.value = \'Submit\';\n}\n

\n

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()是异步的（即返回 a 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';
}

演示