阻止Vue提交页面中的所有表单答案

【问题标题】：Prevent Vue from submitting all forms in page阻止Vue提交页面中的所有表单
【发布时间】：2019-08-22 12:27:40
【问题描述】：

我有两个表单，注册表单和支付表单，在一个页面中，每个表单都有自己的提交按钮，但是当我单击一个时，它会同时提交两个表单。

每个表单都有一个如下所示的提交按钮

Register.php

<button class="btn btn-lg btn-block btn-primary mb-3" 
  @submit.prevent="register"
  :disabled="registerForm.busy"
  name="register-billing">
</button>

Pay.php

<button class="btn btn-lg btn-block btn-primary mb-3" 
  @submit.prevent="post"
  :disabled="registerForm.busy"
  name="register-billing">
</button>

我试过了

@click.prevent="register"

和

v-on:click.stop="register"

没有运气

如何防止两个表单都提交并且只提交其按钮被点击的表单？

【问题讨论】：

也许你把它们放在一个
标签内
您将submit 处理程序附加到<button>，它没有submit 事件。该处理程序应该在<form>。
@Siya 如果我的回答对你有帮助，你能接受它给未来的读者吗？

标签： php vue.js

【解决方案1】：

在表单元素上，您可以设置@submit.prevent="doSomething()" 以在单击表单内的按钮时运行函数。

您还可以将按钮设置为type="button"，这将阻止它提交表单。默认情况下，<form> 标记中的任何按钮都会提交，除非您定义其类型。

如下图。

<form @submit.prevent="doSomething()">
...
<button type="button">Does Nothing</button>
<button type="submit">Submits the form by calling doSomething().</button>
<button>Submits the form by calling doSomething().</button>
</form>

<form>
...
<button type="button" @click="doSomething()">Only runs the function, does not submit the form.</button>
</form>

【讨论】：