Javascript 防止表单多次提交

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

要复制的代码：

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

---

从评论中可以看出，您似乎在发出异步请求（在

axios.post（）

）并立即设置

this.submitting

和

this.value

，而不等待网络请求的结果，类似于此示例：

检查表（e）{
这是真的；
this.value='Submitting'；
轴心柱https://foo');
this.submiting=false；
this.value='Submit'；
}

由于

axios.post（）

是异步的（即返回a），因此后续的行甚至在

post

请求发生之前执行。您可以将这些设置移动到axios.post（）的回调中。：

检查表（e）{
这是真的；
this.value='Submitting'；
轴心柱https://foo）。然后（（）=>{
this.submiting=false；
this.value='Submit'；
});
}

或者您可以这样使用：

异步检查表（e）{
这是真的；
this.value='Submitting'；
等待axios.posthttps://foo');
this.submiting=false；
this.value='Submit'；
}

---

提交表单时按钮文本是否会更改？如果不是，您可能应该使用计算属性返回

this.submitting

和

this.value

的值。否，文本不会更改。你能提供一个例子吗？你不能真正阻止用户使用客户端代码做任何事情。计算属性的文档示例：

computed:{disabledSubmit:function（）{return this.submiting}，buttonText:function（）{return this.submiting？'submiting'：'Submit'；}}

@JoshuaVanDeren没问题：）

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

    // Form Validation

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