Vue：表单可以监听任何事件，而不仅仅是提交

Question

我有一个基本上像这样的表格：

<form @submit.prevent="onSubmitted">
  Email<input type="email" /> <br />Content<input type="text" />
  <CancelSave @cancel="onCanceled" />
</form>

有用于电子邮件和内容的输入字段，并且有一个自定义组件会发出submit和cancel事件。我希望通过表单而不是按钮组自动捕获提交事件。

请注意，如果我只是将所有输入都包装在div和收听提交或取消事件。

一切正常，除了当我按<form>时，它也被视为提交并且表单被提交。

这是我的代码示例： https://codesandbox.io/embed/62lo86rprr

编辑：仅供参考，当您按下cancel按钮时，就会取消并提交

Answer 1

您表单中的“取消”按钮没有type属性。默认情况下，表单中的按钮被假定为submit类型。在取消按钮上添加type="reset"，以避免提交。

请参见MDN docs