防止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>