Cómo reutilizar fácilmente formularios en Vue
Las aplicaciones web contienen muchos formularios hoy en día. Muchas veces, tenemos el mismo diseño de formulario al crear o editar algo (puede ser cualquier cosa: usuario, proyecto, elemento de tarea pendiente, producto, etc.). Por lo general, la creación y edición de un recurso se implementa en 2 páginas separadas; pero, al ser procesos similares, siempre lo podemos reutilizar fácilmente.
Afortunadamente, si usa Vue, puede implementar componentes de formularios reutilizables fácilmente. Empecemos entonces.
Creemos un componente de formulario reutilizable
Crearemos un formulario simple para crear o editar un usuario. Sin más que decir, así es como se verá la forma reutilizable al final.
Para simplificar el proceso, el formulario solamente va a tener dos campos, pero puedes emplear la misma lógica si tienes más campos.
Vamos a conocer primero los componentes de crear y editar por separado, luego, veremos la combinación de ambos.
Componente para crear elementos
Estructura fácil de seguir, un formulario, que capturamos el evento submit con @submit.prevent, nuestros campos de formulario con el v-model y la función submit para guardar datos.
<template>
<form @submit.prevent="submit">
<input type="text" v-model="form.title" />
<textarea v-model="form.description"></textarea>
<button type="submit">Enviar</button>
</form>
</template>
<script>
export default {
mounted() {},
data() {
return {
form: {
title: "", //this.$root.animes[this.position].title,
description: "",
},
};
},
methods: {
submit: function () {
//GUARDAR
});
},
},
};
</script>Componente para Editar
Para la inicialización, es exactamente lo mismo, salvo que inicializamos los datos, para eso el mounted, y en el proceso de guardar lo cual puedes actualizar alguna lista, enviar peticiones etc:
<template>
<form @submit.prevent="submit">
<input type="text" v-model="form.title">
<textarea v-model="form.description"></textarea>
<button type="submit">Enviar</button>
</form>
</template>
<script>
export default {
mounted() {
this.position = this.$route.params.position
this.form.title = this.$root.animes[this.position].title
this.form.description = this.$root.animes[this.position].description
},
data() {
return {
position: 0,
form: {
title:"",
description: "",
},
};
},
methods: {
submit: function () {
// EDITAR
},
},
};
</script>Componente para Editar y Crear
Ahora vamos a fusionar los componente anteriores; para eso, tenemos que recibir algun parametro desde el componente padre para saber si estamos en edición o creación; en este caso, suponemos que es un proceso que podemos llevar a cabo mediante Vue Router:
this.position = this.$route.params.position || -1;Ya con esta inicialización, determinamos si inicializamos los datos o no, al igual de si creamos o editados cuando enviamos el formulario:
<template>
<form @submit.prevent="submit">
<input type="text" v-model="form.title" />
<textarea v-model="form.description"></textarea>
<button type="submit">Enviar</button>
</form>
</template>
<script>
export default {
mounted() {
this.position = this.$route.params.position || -1;
this.form.title =
this.position !== -1 ? this.$root.animes[this.position].title : "";
this.form.description =
this.position !== -1 ? this.$root.animes[this.position].description : "";
},
data() {
return {
position: 0,
form: {
title: "", //this.$root.animes[this.position].title,
description: "",
},
};
},
methods: {
submit: function () {
if (this.position !== -1)
// EDITAR
this.$root.animes[this.position].title = this.form.title;
else {
// CREAR
this.$root.animes.push({
id: this.$root.animes.length,
title: this.form.title,
description: this.form.description,
});
}
},
},
};
</script>Puedes ver los siguientes videos en los cuales vemos varios aspectos de los formularios en Vue:
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter