Vue 在按下回车键和使用验证观察器时阻止表单提交答案

【问题标题】：Vue prevent form submit when pressing enter and using validation-observerVue 在按下回车键和使用验证观察器时阻止表单提交
【发布时间】：2022-01-11 21:50:42
【问题描述】：

我有以下代码：

<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
  <form @submit.prevent>
    <!-- inputs -->
    <button type="submit" @click="handleSubmit(submit)">Save</button>
  </form>
</validation-observer>

我希望@submit.prevent 在表单输入中按下 Enter 键时阻止提交表单，但事实并非如此。

如何防止表单被提交（全局用于所有输入）并在提交前触发验证。

【问题讨论】：

标签： vue.js preventdefault vee-validate

【解决方案1】：

您可以在表单中添加@keydown.enter="$event.preventDefault()"：

  <validation-observer v-slot="{ handleSubmit }" ref="formValidator">
    <form @submit.prevent  @keydown.enter="$event.preventDefault()">
      <!-- input -->
      <button type="submit" @click="handleSubmit(upsert)">Save</button>
    </form>
  </validation-observer>

【讨论】：