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

Posted 2023-02-22

【中文标题】Vuejs表单未在“输入”时提交

【英文标题】：Vuejs form not submitting on "enter"

【发布时间】：2019-06-29 18:18:20

【问题描述】：

TL;DR 问题

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

更详细的问题

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

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

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

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

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

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

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

---

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

【问题讨论】：

检查this question。添加<input type="submit" hidden /> 应该可以工作

@ljubadr 太不可思议了。有用！如果你把它作为答案，我会接受它。最初我怀疑这是否可行，因为在我的实际代码中，我有一个提交表单的按钮，但它仍然不起作用。仔细检查，它只是一个普通按钮，而不是提交按钮 :facepalm: 非常感谢！

这很容易错过:) 我会添加答案

【参考方案1】：

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

这是一个例子。

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

【参考方案2】：

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

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

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

【参考方案3】：

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

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

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

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

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

【参考方案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中找到更多关于隐藏按钮的信息

【讨论】：

display: none 不是更好吗？