我尝试使用 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';
}
最佳答案
从评论来看,听起来您正在发出异步请求(在 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';
}
关于javascript - 防止表单多次提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52155716/