Vuejs表单未在“输入”时提交

Question

TL;DR 问题

为什么我不能在一个表单中使用2个相同的输入字段，并且输入按钮提交表单

更详细的问题

直截了当。我正在尝试使用enter 按钮在输入元素获得焦点时提交表单，然后它应该会发出一个事件。

• 我在这里写了一个代码笔，它复制了“奇怪”的行为：https://codepen.io/anon/pen/gqGMmW

如您所见，如果我有超过 1 个相同类型的输入（例如，2 个 input="text" 输入，当我在关注输入时按下 enter 按钮时，它无法发出 @987654326 @事件。

在它正下方的第二个应用示例中，我有完全相同的表单，具有完全相同的 vuejs 实例化，但只有 一个 输入字段，并且当您按下 Enter 时，焦点在该元素上它正确地发出了提交事件。

我试图用谷歌搜索这里可能发生的事情，但除了“防止在输入时提交表单”之外，我很难找到很多其他用途。

我已尝试向元素添加 ID 属性、name 属性等，但仍无法按预期工作。

我不是 vuejs 的初学者，但也不是高级 JS 用户，所以“简单”的答案将不胜感激：D

---

如果需要更多信息，请告诉我们，我会提供尽可能多的信息

Answer 1

在 Vue 3 上我们可以直接在表单中添加@keyup.enter 事件。

这是一个例子。

<form @keyup.enter="handleSubmit($event, onSubmit)">

Answer 2

为我解决了。不要在表单元素上挂载 Vue。在表单的父元素上挂载 Vue。

<form
    id="app"
    method="post"
    novalidate="true"
    @submit="onSubmit"
>

<div id="app">
    <form
        method="post"
        novalidate="true"
        @submit="onSubmit"
    >

Answer 3

我尝试了许多不同的解决方案，但没有一个对我有用。也许是因为我的表单中有几个按钮，其中只有一个应该提交表单。

This 终于奏效了： 在输入的最后一个元素上使用@keyup.enter，如下所示：

<input type="text" @keyup.enter="save" />

这样，当用户在填写表单的最后一个字段后立即按 Enter 键时，表单将被提交。

附： 在我的情况下，我有一个 <v-text-field> 而不是 <input> 但它应该没有区别。

Answer 4

确保您的表单具有任一

<button type="submit">Submit</button>

或

<input type="submit" value="Submit" />

---

如果不想显示按钮，可以使用

<input type="submit" style="position: absolute; left: -9999px"/>

你可以在这个问题Submitting a form by pressing enter without a submit button中找到更多关于隐藏按钮的信息