防止表单多次提交

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请求发生之前执行。您可以将这些设置移动到axios.post()的then回调中：

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';
}

演示