防止Vue提交页面中的所有表单

Question

我有两个表格，注册表格和付费表格，在一个页面中，每个表格都有自己的提交按钮，但是当我单击其中一个时，它会同时提交两个表格。每个表单都有一个提交按钮，看起来像这样注册.php<button class="btn btn-lg btn-block btn-primary mb-3"   @submit.prevent="register"  :disabled="registerForm.busy"  name="register-billing"></button>支付.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"没有运气如何防止两个表单都提交而只提交一个单击其按钮的表单？

Answer 1

在表单元素上，您可以设置 [e-mail]="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>