estoy desarrollando un formulario en vue, pero cuando llamo a mi componente me dice que el formulario no esta conectado: Form submission canceled because the form is not connected
Mi formulario es el siguiente:
<template>
<div class="mt-40 grid grid-cols-5 gap-4 content-end">
<div></div>
<div></div>
<form @ref="form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-80">
<div class="mb-4">
<label class="block text-gray-700 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="user" type="text" placeholder="Username" v-model="nombre">
</div>
<div class="mb-6">
<label class="block text-gray-700 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border border-red-500 rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="passw0rd" type="password" placeholder="******************" v-model="contraseña">
<p class="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<label class="block text-gray-700 text-sm font-bold mb-2" for="nivel">
Nivel <select v-model="niveles">
<option v-for="nivel in niveles" :key="nivel">
{{ nivel}}
</option>
</select>
</label>
<br>
<div class="flex items-center justify-between">
<button id="btnRegistro" @click="enviarRegistro()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
Register
</button>
</div>
</form>
</div>
</template>
Y tengo una función submit que se envia cuando se hace un submit en el formulario mediante el botón que tiene el tipo submit:
El botón:
<button id="btnRegistro" @click="enviarRegistro()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">
Register
</button>
La función:
const submit = ()=>{
this.$refs.form.$el.submit()
}
form
? En Vue:<form @submit.prevent="<la_función_en_cuestión>">
. (De verdad la pregunta, puede que sea un método distinto nada más)appendChild
no aplica en este caso).