Tengo una aplicación web con múltiples formularios y dentro de estos formularios múltiples componentes personalizados: entrada, área de texto, cuadro de selección, selector de fecha, botón de opción, casilla de verificación, ....
Descubrí que la función de envío se activa al presionar la tecla Intro dentro de un componente secundario de una etiqueta de formulario. Algo que no quiero. Quiero poder usar la tecla Intro para otras cosas, como conformar una selección en un menú desplegable.
Ejemplo de formulario
<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>
EnviarBotón.vue
<button type="submit">{{ isSubmitting ? submittingLabel : label }}</button>
Por lo tanto, estoy buscando una manera de evitar el comportamiento predeterminado. Agregar una función de tecla abajo y verificar si la tecla Intro se presiona dentro de todos los componentes personalizados seguidos de un event.preventDefault()
no funcionó.
Una solución funcional debería ser cambiar el tipo de botón de 'enviar' a 'botón' y usar un @clic, pero eso no suena como html semántico.
¿Cualquier otra sugerencia?