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

Phi*_*oss 4 javascript vue.js

TL; DR问题

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

更详细的问题

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

  • 我在这里编写了一个Codepen,它复制了“怪异”的行为:https ://codepen.io/anon/pen/gqGMmW

如您所见,如果我有1个以上相同类型的输入(例如2个input="text"输入,当我enter专注于某个输入时按下按钮时,它将无法发出该submit事件。

在紧接其下的第二个应用示例中,我具有完全相同的形式,具有完全相同的vuejs实例化,但是只有一个输入字段,并且当您按Enter键关注该元素时,它将正确地发出Submit 事件。

我试图用谷歌搜索这里可能发生的事情,但是除了“防止在回车时提交表单”外,还很难找到其他用途。

我尝试将ID属性,name属性等添加到元素,但仍无法按预期工作。

我不是vuejs的初学者,也不是高级JS用户,因此,“简单”的答案将不胜感激:D


如果需要更多信息,请告知我们,我们将尽力提供

lju*_*adr 9

确保您的表格具有

<button type="submit">Submit</button>
Run Code Online (Sandbox Code Playgroud)

要么

<input type="submit" value="Submit" />
Run Code Online (Sandbox Code Playgroud)

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

<input type="submit" style="position: absolute; left: -9999px"/>
Run Code Online (Sandbox Code Playgroud)

您可以在此问题中找到有关隐藏按钮的更多信息,方法是按Enter键而不提交按钮

  • `display: none` 不是更好吗? (3认同)