Puede que recuerdes como generar listas de elementos de manera reactiva gracias a Vue.js, así que siguiendo con esta utilidad, ¿por qué no aprendemos a preparar eventos que disparen nuestra nueva información recogida desde el DOM?. Para ello, nos valdremos de los listeners en Vue.js.
Pero antes, un pequeño recordatorio…
Vue.js acepta el uso de acortadores para las directivas v-bind y v-on. Donde v-bind pasaba a ser : y v-on podría ser @
Vale, después de esta puntualización pasamos a pensar en jQuery. Hasta ahora, para los que se manejan con jQuery, una forma de recoger los datos de una entrada de texto y agregarla a un listado, era procesar todos los elementos, recoger valores, disparar la sentencia click o el atributo onclick=»funcion()» para realizar un «append» al listado del DOM.
«Espera, ponme un ejemplo que no me aclaro nada». Muy bien, aquí lo tienes:
See the Pen listeners en jquery by Jesús Chicano (@jesuschicano) on CodePen.
- Analizando el código HTML, vemos que solamente tenemos un listado (ya desarrollado, para nada es reactivo), seguido de sendos input de entrada y envío. Obviamente todo con identificadores para que nos sea mucho más sencillo recogerlos por JavaScript.
- Declaramos el código jQuery comenzando con obtener los elementos del DOM con los correspondientes selectors y guardándolos en variables.
- Procedemos a ejecutar el listener click de jQuery para luego…
- Recoger el valor de la caja
- Añadir un elemento li con el contenido de la caja
- Y limpiamos la caja para esperar otro nuevo dato.
Un ejemplo fácil, que no tiene mayor complicación que la de acordarnos que tenemos que usar la función append() para agregar al final del listado y no usar html() porque sino machacaríamos todo lo que habría.
Listeners en Vue
Ahora observemos un ejemplo parecido pero desarrollado con Vue.js:
See the Pen Vue.js Listeners by Jesús Chicano (@jesuschicano) on CodePen.
Echando un vistazo al apartado de HTML vemos que solamente tenemos un bloque identificado donde desarrollar Vue, una lista reactiva a la directiva v-for y dos input:
- Caja de texto con directiva v-model que apunta a «newNombre«.
- Submit con directiva on al atribujo click para llamar a la función addNewNombre.
Y en nuestro JavaScript nos aparece la declaración de un nuevo objeto Vue donde tenemos:
- Un data que recibe la propiedad newNombre, la cual está vacía… y un array de nombres.
Este listado de nombres se generarán en el DOM reactivamente mediante la directiva v-for que hemos agregado en la etiqueta li.
Y ahora entramos en algo nuevo:
Declaración de métodos en Vue
Esto que parece algo usual en código JavaScript, es bastante delicado para Vue. Las funciones o métodos se han de contener dentro de methods. Sin este encapsulamiento, las funciones de por sí solas, jamás serán reconocidas por Vue, además de que estos métodos deben tener un nombre único, no pueden ser anónimas.
Dentro del methods tenemos nuestro método addNewNombre() el cual aparecía vinculado en nuestro botón del DOM.
La funcionalidad de este método sería:
- A la propiedad nombres le agregas (push) lo que recojas de la caja del modelo newNombre.
- Para acabar, vacías dicha caja.
[Resopla descansado] ¡Vaya dificultad! ¡Madre mía, no voy a seguir estudiando Vue!
Así es, con esto ya habríamos realizado la misma operación que hicimos anteriormente en jQuery pero mucho más condensado y fácil.
Hemos visto que con la directiva v-on hemos preparado un listener en Vue para cuando hacemos clic. Este clic llama a una función que recoge, añade y limpia con tan solo 2 líneas de código. Dejando a la altura del betún a jQuery.