Question

我在一页中有两种形式，分别是注册表格和付款表格，每个都有自己的提交按钮，但是当我单击一个按钮时，它将同时提交两种表格。

每个表单都有一个看起来像这样的提交按钮

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"

没有运气

如何阻止两个表单都提交，而仅提交其按钮被单击的表单？

Answer 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>

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

1 个答案: