Vue在表单内按Enter时阻止表单提交

Question

我有一个带有多个 forms 的 webapp，并且在这些 forms 内部有多个定制组件：输入、文本区域、选择框、日期选择器、单选按钮、复选框……。

我发现在表单标签的子组件内按下回车键时会触发提交 function。 我不想要的东西。 我希望能够将回车键用于其他事情，例如在下拉列表中进行选择。

表单示例

<template>
    <form @submit.prevent="handleLogin">
        <fieldset :disabled="isSubmitting" class="space-y-6">
            <Input :label="$tc('email', 1)" type="email" id="email" v-model="user.email" :error="errors.email" />
            <Input :label="$tc('password', 1)" type="password" id="password" v-model="user.password" :error="errors.password" />
            <Select :label="$tc('role', 1)" id="role" :options="roles" displayProperty="display_name" valueProperty="id" v-model="user.role" :error="errors.role" />
            <SubmitButton :label="$tc('register', 1)" :submittingLabel="$tc('register_loader', 1)" :isSubmitting="isSubmitting" />
        </fieldset>
    </form>
</template>

提交按钮.vue

<button type="submit">{{ isSubmitting ? submittingLabel : label }}</button>

因此，我正在寻找一种方法来防止默认行为。 添加一个 keydown function 并检查是否在所有自定义组件内按下了 enter 键，然后是event.preventDefault()并没有成功。

一个可行的解决方案应该是将按钮的类型从“提交”更改为“按钮”并使用@click，但这听起来不像语义 html。

还有其他建议吗？

Answer 1

您可以防止在输入键上提交，只需注释顶级表单。

<form @submit.prevent="handleLogin" @keydown.enter="$event.preventDefault()">

你可以在行动中看到它

Answer 2

我认为

<form v-on:submit.prevent="onSubmit"></form>

应该做的伎俩。 如果没有，请查看Event-Modifiers以找到最适合您的用例的一个。 快乐编码！