Vue: форма слушает любое событие, а не просто отправить

Question

У меня есть форма, которая в основном выглядит следующим образом:

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

Есть поля ввода для электронной почты и содержимого, а также есть пользовательский компонент, который генерирует события submit и cancel.Я хочу, чтобы событие submit было автоматически перехвачено формой, а не группой кнопок.

Обратите внимание, что я явно хочу использовать элемент html <form>, чтобы получить функции проверки HTML, которые я не могуиметь (по крайней мере, без каких-либо проверочных библиотек), если я просто обертываю все входные данные в div и слушаю события отправки или отмены.

Все работает нормально, за исключением того, что когда я нажимаю cancel, оно также перехватывается какотправить и форма будет отправлена.

Вот пример моего кода: https://codesandbox.io/embed/62lo86rprr

РЕДАКТИРОВАТЬ: FYI Видимо при нажатии кнопки cancel, отмена Иотправить поймали

Answer 1

Кнопка отмены в вашей форме не имеет атрибута type.По умолчанию предполагается, что кнопки в формах имеют тип submit.Добавьте type="reset" к кнопке отмены, чтобы избежать отправки.

См. Документы MDN