javascript - Vuejs 表单未在 "enter"上提交

Question

TL;DR 问题

为什么我不能在一个表单中使用2个相同的输入框，然后输入按钮提交表单

更详细的问题

开门见山。我正在尝试使用 enter 按钮在输入元素获得焦点时提交表单，然后应该发出一个事件。

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

如您所见，如果我有超过 1 个相同类型的输入(例如，2 个 input="text" 输入，当我按下 enter按钮聚焦于输入时，它无法发出 submit 事件。

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

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

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

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

---

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

Answer 1

确保您的表单具有以下任一条件

<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 中找到有关隐藏按钮的更多信息