Construyendo formas complejas en Vue

Lo más probable es que tengamos que crear un formulario complejo al menos una vez en nuestro viaje de ingeniería de software. Este artículo analiza la creación de un formulario complejo que se puede mejorar progresivamente utilizando algunas funciones de Vue como v-fory v-model. También ofrece un repaso de algunas características básicas básicas de Vue que le resultarán útiles a la hora de desarrollar el formulario complejo en su uso diario de Vue.

La mayoría de las veces, los ingenieros web siempre tienen motivos para crear formularios, desde simples hasta complejos. También es un dolor de cabeza familiar para los ingenieros la rapidez con la que las bases de código se vuelven increíblemente desordenadas e incongruentemente largas al construir formas grandes y complejas. De ahí surge la pregunta: “¿Cómo se puede optimizar esto?”.

Considere un escenario empresarial en el que necesitamos crear una lista de espera que capture el nombre y el correo electrónico. Este escenario solo requiere dos o tres campos de entrada, según sea el caso, y podría agregarse rápidamente con poca o ninguna molestia. Ahora, consideremos un escenario empresarial diferente en el que los usuarios deben completar un formulario con diez campos de entrada en 5 secciones. Escribir 50 campos de entrada no es sólo un trabajo agotador para el ingeniero sino también una pérdida de mucho tiempo técnico. Más aún, va en contra del infame principio "No te repitas" (DRY).

En este artículo, nos centraremos en aprender a utilizar los componentes de Vue, la v-modeldirectiva y los accesorios de Vue para crear formularios complejos en Vue.

La v-modeldirectiva en Vue

Vue tiene varios atributos HTML únicos llamados directivas, que tienen el prefijo v-. Estas directivas realizan diferentes funciones, desde representar datos en el DOM hasta manipular datos.

Es v-modeluna de esas directivas y es responsable del enlace de datos bidireccional entre el valor de entrada del formulario y el valor almacenado en la datapropiedad. Funciona v-modelcon cualquier elemento de entrada, como el inputo los selectelementos. Debajo del capó, combina el valor de entrada ingresado y el detector de eventos de cambio correspondiente de la siguiente manera:

!-- Input element --input v-model="inputValue" type="text"!-- Select element --select v-model="selectedValue"  option value=""Please select the right option/option  optionA/option  optionB/option  optionC/option/select

El inputevento se utiliza para el input type= "text"elemento. Del mismo modo, para select … /select, input type= "checkbox"y input type= "radio", v-modela su vez, hará coincidir los valores con un changeevento.

Componentes en Vue

La reutilización es uno de los principios básicos de la ingeniería de software y hace hincapié en el uso de funciones o activos de software existentes en un proyecto de software por razones que van desde minimizar el tiempo de desarrollo hasta ahorrar costos.

Una de las formas en que observamos la reutilización en Vue es mediante el uso de componentes. Los componentes de Vue son interfaces modulares y reutilizables con su propia lógica y contenido personalizado. Aunque pueden anidarse unos dentro de otros como un elemento HTML normal, también pueden funcionar de forma aislada.

Los componentes de Vue se pueden construir de dos maneras de la siguiente manera:

• Sin el paso de construcción,
• Con el paso de construcción.

Sin el paso de construcción

Los componentes de Vue se pueden crear sin utilizar la interfaz de línea de comandos (CLI) de Vue . Este método de creación de componentes define un objeto JavaScript en una propiedad de opciones de instancia de Vue. En el bloque de código siguiente, incorporamos una cadena de JavaScript que Vue analiza sobre la marcha.

template: `  p Vue component without the build step /p  `

Con el paso de construcción

La creación de componentes mediante el paso de construcción implica el uso de Vite , una herramienta de construcción increíblemente rápida y liviana. El uso del paso de compilación para crear un componente de Vue crea un componente de archivo único (SFC) , ya que puede adaptarse a la lógica, el contenido y el estilo del archivo.

template  p Vue component with the build step /p/template

En el código anterior, tenemos la petiqueta dentro de la etiqueta HTML template, que se representa cuando usamos un paso de compilación para la aplicación.

Registrar componentes de Vue

Crear un componente de Vue es el primer paso de la reutilización y modularidad en Vue. Lo siguiente es el registro y el uso real del componente Vue creado.

Los componentes de Vue permiten anidar componentes dentro de componentes y, aún más, anidar componentes dentro de un componente global o principal.

Consideremos que almacenamos el componente que creamos usando el paso de compilación en un BuildStep.vuearchivo. Para que este componente esté disponible para su uso, lo importaremos a otro componente de Vue o a un archivo .vue, como el archivo de entrada raíz. Después de importar este componente, podemos registrar el nombre del componente en la componentspropiedad de opción, haciendo así que el componente esté disponible como una etiqueta HTML. Si bien esta etiqueta HTML tendrá un nombre personalizado, el motor Vue las analizará como HTML válido y las mostrará correctamente en el navegador.

!-- App.vue --template  div    BuildStep /  /div/templatescriptimport BuildStep from './BuildStep.vue'export default {  components: {    BuildStep  }}/script

A partir de lo anterior, importamos el BuildStep.vuecomponente al App.vuearchivo, lo registramos en la componentspropiedad de opción y luego lo declaramos dentro de nuestra plantilla HTML como BuildStep /.

Accesorios de vista

Los accesorios de Vue, también conocidos como propiedades, son atributos personalizados que se utilizan en un componente para pasar datos del componente principal a los componentes secundarios. Un caso en el que los accesorios pueden resultar útiles es cuando necesitamos un componente con contenido diferente pero con un diseño visual constante, considerando que un componente puede tener tantos accesorios como sea posible.

La propiedad Vue tiene un flujo de datos unidireccional, es decir, del componente principal al secundario. Por lo tanto, el componente principal posee los datos y el componente secundario no puede modificarlos. En cambio, el componente secundario puede emitir eventos que el componente principal puede registrar.

Declaración de accesorios en Vue

Consideremos el siguiente bloque de código:

template  p Vue component {{ buildType }} the build step/p/templatescriptexport default {  props: {    buildType: {      type: String    }  }}/script

Actualizamos la plantilla HTML con el interpolado buildType, que se ejecutará y reemplazará con el valor de los accesorios que se transmitirán desde el componente principal.

También agregamos una etiqueta de accesorios en la propiedad de opción de accesorios para escuchar los cambios de accesorios y actualizar la plantilla en consecuencia. Dentro de esta propiedad de opción de accesorios, declaramos el nombre de los accesorios, que coincide con lo que tenemos en la templateetiqueta, y también agregamos el tipo de accesorios .

El tipo de props, que puede ser Strings, Numbers, Arrays, Boolean u Objects, actúa como regla o verificación para determinar qué recibirá nuestro componente.

En el ejemplo anterior, agregamos un tipo de Cadena; obtendremos un error si intentamos pasar cualquier otro tipo de valor como un booleano u objeto.

Pasando accesorios en Vue

Para concluir, actualizaremos el archivo principal, es decir, el App.vuey pasaremos los accesorios en consecuencia.

!-- App.vue --template  div    BuildStep buildType="with"/  /div/templatescriptimport BuildStep from './BuildStep.vue'export default {  components: {    BuildStep  }}/script

Ahora, cuando se procese el componente del paso de compilación , veremos algo como lo siguiente:

Vue component with the build step

Con los accesorios, no necesitamos crear un nuevo componente desde cero para mostrar si un componente tiene un paso de compilación o no. Podemos volver a declarar el BuildStep /componente y agregar el tipo de compilación relevante.

!-- App..vue --template  div    BuildStep buildType="without"/  /div/template

Del mismo modo, al igual que en el paso de compilación, cuando se renderice el componente, tendremos la siguiente vista:

Vue component without the build step

Manejo de eventos en Vue

Vue tiene muchas directivas, que incluyen v-on. Es v-onresponsable de escuchar y manejar los eventos DOM para actuar cuando se activan. La v-ondirectiva también se puede escribir como @símbolo para reducir la verbosidad.

button @click="checkBuildType" Check build type /button

La etiqueta del botón en el bloque de código anterior tiene un evento de clic adjunto a un checkBuildTypemétodo. Cuando se hace clic en este botón, se facilita la ejecución de una función que verifica el tipo de compilación del componente.

Modificadores de eventos

La v-ondirectiva tiene varios modificadores de eventos que agregan atributos únicos al v-oncontrolador de eventos. Estos modificadores de eventos comienzan con un punto y se encuentran justo después del nombre del modificador de eventos.

form @submit.prevent="submitData" ...!-- This enables a form to be submitted while preventing the page from being reloaded. --/form

Modificadores clave

Los modificadores de teclas nos ayudan a escuchar los eventos del teclado, como entery page-upsobre la marcha. Los modificadores clave están vinculados a la v-ondirectiva como v-on:eventname.keymodifiername, donde eventnamepodría estar keyupy modifiernamecomo enter.

input @keyup.enter="checkInput"

Los modificadores de clave también ofrecen flexibilidad pero permiten el encadenamiento de múltiples nombres de clave.

input @keyup.ctrl.enter="checkInput"

Aquí, los nombres de las teclas escucharán los eventos del teclado ctrly del teclado antes de que se llame al método.entercheckInput

La v-forDirectiva

Así como JavaScript permite iterar a través de matrices utilizando bucles como el forbucle, Vue-js también proporciona una directiva incorporada conocida como que v-forrealiza la misma función.

Podemos escribir la v-forsintaxis item in itemsdonde los elementos son la matriz sobre la que estamos iterando o para items of itemsexpresar la similitud con la sintaxis del bucle de JavaScript.

Representación de lista

Consideremos representar los tipos de pasos de construcción de componentes en una página.

template  div    ul        li v-for="steps in buildSteps" :key="steps.id" {{ steps.step }}/li      /ul  /div/templatescriptexport default { data() {   return {     buildSteps: [      {       id: "step 1",       step:'With the build step',      },      {        id: "step 2",       step:'Without the build step'      }    ]   } }}/script

En el bloque de código anterior, la stepsmatriz dentro de la datapropiedad muestra los dos tipos de pasos de compilación que tenemos para un componente. Dentro de nuestra plantilla, usamos la v-fordirectiva para recorrer la matriz de pasos, cuyo resultado representaremos en una lista desordenada.

Agregamos un keyargumento opcional que representa el índice del elemento que estamos iterando actualmente. Pero más allá de eso, keyacepta un identificador único que nos permite rastrear el nodo de cada elemento para una gestión adecuada del estado.

Usar v-forcon un componente

Al igual que usar v-forpara representar listas, también podemos usarlo para generar componentes. Podemos agregar la v-fordirectiva al componente de la siguiente manera:

BuildStep v-for="steps in buildSteps" :key="steps.id"/

El bloque de código anterior no hará mucho para renderizar o pasar el stepcomponente. En su lugar, necesitaremos pasar el valor de as stepprops al componente.

BuildStep v-for="steps in buildSteps" :key="steps.id" :buildType="steps.step" /

Hacemos lo anterior para evitar cualquier fijación apretada del v-foral componente.

Lo más importante a tener en cuenta en los diferentes usos de v-fores la automatización de un proceso largo. Podemos pasar de enumerar manualmente 100 elementos o componentes a usar la v-fordirectiva y renderizar todo en una fracción de segundo, según sea el caso.

Creación de un formulario de registro complejo en Vue

Combinaremos todo lo que hemos aprendido sobre los v-modelcomponentes de Vue, los accesorios de Vue, la v-fordirectiva y el manejo de eventos para crear un formulario complejo que nos ayude a lograr eficiencia, escalabilidad y gestión del tiempo.

Este formulario se encargará de capturar los datos personales de los estudiantes, que desarrollaremos para facilitar la mejora progresiva a medida que aumenten las demandas comerciales.

Configurar la aplicación Vue

Estaremos construyendo nuestra aplicación Vue utilizando el paso de compilación. Para hacer esto, necesitaremos asegurarnos de tener instalado lo siguiente:

• Nodo.js ;
• npm o hilo .

Ahora procederemos a crear nuestra aplicación Vue ejecutando el siguiente comando:

# npmnpm init vue@latest vue-complex-form

¿ Dónde vue-complex-formestá el nombre de la aplicación Vue?

Después de eso, ejecutaremos el siguiente comando en la raíz de nuestro proyecto Vue:

npm install

Crear el archivo JSON para alojar los datos del formulario

Nuestro objetivo es crear un formulario donde los usuarios puedan completar sus datos. Si bien podemos agregar manualmente todos los campos de entrada, usaremos un enfoque diferente para simplificar nuestro código base. Esto lo lograremos creando un archivo JSON llamado util/bio-data.json. Dentro de cada uno de los objetos JSON, tendremos la información básica que queremos que tenga cada campo de entrada.

[  {    "id": 1,    "inputvalue":"  ",    "formdata": "First Name",    "type": "text",    "inputdata": "firstname"  },  {    "id": 2,    "inputvalue":"  ",    "formdata": "Last Name",    "type": "text",    "inputdata": "lastname"  },]

Como se ve en el bloque de código anterior, creamos un objeto con algunas claves que ya contienen valores:

• idactúa como identificador principal del objeto individual;
• inputvalueatenderá al valor pasado al v-model;
• formdatamanejará el marcador de posición de entrada y el nombre de las etiquetas;
• typedenota el tipo de entrada, como correo electrónico, número o texto;
• inputdatarepresenta la identificación y el nombre de entrada .

Los valores de estas claves se pasarán más adelante a nuestro componente como accesorios. Podemos acceder a los datos JSON completos aquí.

Creando el componente reutilizable

Crearemos un componente de entrada al que se le pasarán los accesorios del archivo JSON que creamos. Este componente de entrada se repetirá mediante el uso de una v-fordirectiva para crear numerosas instancias del campo de entrada de una vez sin tener que escribirlo todo manualmente. Para hacer esto, crearemos un components/TheInputTemplate.vuearchivo y agregaremos el siguiente código:

template  div    label :for="inputData"{{ formData }}/label    input      :value= "modelValue"      :type= "type"      :id= "inputData"      :name= "inputData"      :placeholder= "formData"      @input="$emit('update:modelValue', $event.target.value)"      /div /template scriptexport default {  name: 'TheInputTemplate',  props: {    modelValue: {      type: String    },    formData: {      type: String    },    type: {      type: String    },    inputData: {      type: String    }  },  emits: ['update:modelValue']}/scriptstylelabel {  display: inline-block;  margin-bottom: 0.5rem;  text-transform: uppercase;  color: rgb(61, 59, 59);  font-weight: 700;  font-size: 0.8rem;}input {  display: block;  width: 90%;  padding: 0.5rem;  margin: 0 auto 1.5rem auto;}/style

En el bloque de código anterior, logramos lo siguiente:

• Creamos un componente con un campo de entrada.
• Dentro del campo de entrada, hacemos coincidir los valores que pasaremos desde el archivo JSON con los respectivos lugares de interés en el elemento.
• También creamos accesorios de modelValue, formData, typey inputDataque se registrarán en el componente cuando se exporte. Estos accesorios serán responsables de tomar datos del archivo principal y transmitirlos al TheInputTemplate.vuecomponente.
• Vinculó el modelValueaccesorio al valor del valor de entrada.
• Se agregó el update:modelValue, que se emite cuando inputse activa el evento.

Registro del componente de entrada

Navegaremos hasta nuestro App.vuearchivo e importaremos el TheInputTemplate.vuecomponente desde donde podremos proceder a usarlo.

template  form    TheInputTemplate/  /form/templatescriptimport TheInputTemplate from './components/TheInputTemplate.vue'export default {  name: 'App',  components: {    TheInputTemplate  }}/scriptstylehtml, body{  background-color: grey;  height: 100%;  min-height: 100vh;}.wrapper {  background-color: white;  width: 50%;  border-radius: 3px;  padding: 2rem  1.5rem;  margin: 2rem auto;}/style

Aquí importamos el TheInputTemplate.vuecomponente al App.vuearchivo, lo registramos en la componentspropiedad de opción y luego lo declaramos dentro de nuestra plantilla HTML.

Si ejecutamos npm run serve, deberíamos tener la siguiente vista:

En este punto, no hay mucho que ver porque todavía tenemos que registrar los accesorios en el componente.

Pasar datos de entrada

Para obtener el resultado que buscamos, necesitaremos pasar los datos de entrada y agregar los accesorios al componente. Para ello actualizaremos nuestro App.vuearchivo:

template  div    div v-for="bioinfo in biodata" :key="bioinfo.id"      TheInputTemplate v-model="bioinfo.inputvalue":formData= "bioinfo.formdata":type= "bioinfo.type":inputData= "bioinfo.inputdata"/    /div  /divscript//add imports hereimport biodata from "../util/bio-data.json";export default {  name: 'App', //component goes here  data: () = ({    biodata  })}/script

Desde el bloque de código anterior, logramos varias cosas:

• Importamos el archivo JSON de datos biológicos que creamos al App.vuearchivo. Luego agregamos la variable importada a las dataopciones del script Vue.
• Recorrió los datos JSON, que creamos instancias en las opciones de datos usando la v-fordirectiva Vue.
• Dentro del TheInputTemplate.vuecomponente que creamos, pasamos los datos adecuados para completar la opción de accesorios.

En este punto, nuestra interfaz debería verse como la siguiente:

Para confirmar si nuestra aplicación funciona como debería, abriremos nuestro Vue DevTools o instalaremos uno desde https://devtools.vuejs.org si aún no lo tenemos en nuestro navegador.

Cuando escribimos un valor en cualquiera de los campos de entrada, podemos ver el valor aparecer en modelValueel panel de control de Vue Devtools.

Conclusión

En este artículo, exploramos algunos fundamentos centrales de Vue como v-for, v-model, etc., que luego unimos para construir una forma compleja. El objetivo principal de este artículo es simplificar el proceso de creación de formularios complejos manteniendo la legibilidad y la reutilización y reduciendo el tiempo de desarrollo.

Si, en cualquier caso, fuera necesario ampliar el formulario, todo lo que el desarrollador tendría que hacer es completar los archivos JSON con la información necesaria y listo, el formulario estará listo. Además, los nuevos ingenieros pueden evitar nadar en largas líneas de código para tener una idea de lo que sucede en el código base.

Nota : Para explorar más sobre el manejo de eventos dentro de componentes para manejar la mayor complejidad posible, puede consultar este artículo sobre el uso de componentes con v-model .

Lecturas adicionales sobre la revista Smashing

• “ Optimización de una aplicación Vue ”, Michelle Barker
• " Tres ideas que obtuve mientras investigaba la accesibilidad de Vue.js ", Marcus Herrmann
• “ Herramientas y prácticas para acelerar el proceso de desarrollo de Vue.js ”, Uma Victor
• “ Pasar de Vue 1 a Vue 2 y a Vue 3: un estudio de caso sobre la migración de un sistema CMS sin cabeza ”, Lisi Linhart

(yk, il)Explora más en

• vista
• Guías
• javascript
• Técnicas