Listas
RENDERIZADO DE LISTAS
Otra situación típica en la creación de nuevas interfaces de usuario es la enumeración de elementos dentro de una lista. Para ello en Vue se utiliza la directiva v-for a la que se le pasa una colección de elementos que se representarán dentro del bloque.
Como ejercicio plantearemos una clásica lista de la compra. Simplemente crearemos dentro de la instancia Vue una propiedad que denominaremos shoppingList que es un array de cadenas de texto que representan cada uno de los productos de la lista.
Con la propiedad definida solo nos resta indicar mediante la directiva v-for que iteraremos por cada producto de nuestra lista de la compra y renderizaremos cada elemento de la lista <li>.
<ul>
<li v-for=”product in shoppingList”> {{ product }} </li>
</ul>
Con esta simple definición ya tenemos nuestra lista de la compra. [1]
Modificando ligeramente el código podemos añadir un nuevo input que añada elementos a mi compra con algunos mecanismos que hemos aprendido en anteriores ejercicios. De esta forma vemos cómo si añadimos otro nuevo elemento a nuestra lista de productos se actualiza nuestra compra [2].
Enumeración de propiedades
V-FOR PARA OBJETOS
Hemos visto cómo mostrar una enumeración de productos de nuestra lista de la compra con la directiva v-for y en este ejercicio veremos cómo mostrar un listado de las propiedades de un objeto de nuestra instancia Vue.
Tenemos una propiedad dentro de la instancia Vue que es un objeto que representa la información de uno de los posts de nuestro blog y que queremos renderizar.
post: {
title: ‘Nuevo artículo’,
date: ‘24/03/2019’,
author: ‘Ramón’,
}
Ahora lo que tenemos que hacer es usar la directiva v-for con el siguiente formato, descomponiendo el objeto en sus propiedades en pares clave-valor.
<ul>
<li v-for=”(value, key) in post” v-blue>
{{ key }}: {{ value }}
</li>
</ul>
También podríamos usar el índice en esta descomposición, si lo necesitáramos, de la siguiente manera:
<ul>
<li v-for=”(value, key, index) in post”
style= “list-style-type:none;” v-blue>
{{ index + 1 }} => {{ key }}: {{ value }}
</li>
</ul>
Podemos ver el resultado de la inspección del objeto en la imagen [1] y para seguir jugando con nuestro ejemplo meter un nuevo atributo y ver cómo se renderiza perfectamente cuando guardamos. [2]
Filtros
MODIFICADORES DE VALOR
Vamos a imaginarnos que tenemos nuestra interfaz que renderiza la lista de la compra que hemos realizado en anteriores ejercicios. Hemos sacado la aplicación que muestra la lista de la compra pero los usuarios se quejan de que se muestran en letras minúsculas y ellos quieren que se vea bien grande y se muestre en letras mayúsculas aun cuando ellos los introduzcan en minúsculas.[1]
Podremos modificar este comportamiento con una herramienta que pone a nuestra disposición Vue: los filtros.
Definiremos un filtro que pase a mayúsculas cada valor que se le pase en este caso de la siguiente forma:
Vue.filter(‘productName’, function(value){
if(!value) return ‘’
value = value.toString();
return value.toUpperCase();
});
Y en la declaración HTML lo haremos de la siguiente forma
<ul>
<li v-for=”product in shoppingList”>
{{ product | productName }}
/li>
</ul>
Esta notación es el típico pipe que es muy común y que en este caso se podría leer algo así como “a este valor la aplico esta función o transformación”.[2]
Renderizar solo una vez
DIRECTIVA V-ONCE
En caso de que necesitemos mostrar un único valor cuando carguemos la página haremos uso de una directiva especial llamada v-once. Esta directiva asegura que un elemento solo tomará un valor durante el renderizado y, en el caso de que la página se vuelva a renderizar, considerará al elemento como un elemento estático que no se tomará en cuenta de nuevo.
Una razón por la que se puede marcar un elemento con la directiva v-once sería optimizar el rendimiento en la actualización de datos. El contenido del elemento que se renderice una sola vez podría ser costoso.
En este ejemplo vemos cómo se renderiza una sola vez aquello que tengamos dentro de la variable incluida en el input [1].
Si posteriormente a la carga modificamos el contenido del input y, por tanto, el contenido de la variable podemos comprobar cómo no se renderiza de nuevo el contenido de nuestro título [2].
Mouse move
DIRECTIVA V-ON:MOUSEMOVE
En esta ocasión vamos a ver dentro de las directivas para capturar eventos del DOM aquella que nos permite filtrar los generados cuando el ratón se mueve por encima de uno de nuestros componentes.
Estamos hablando de la directiva v-on acompañado del evento mousemove [1]:
<div class=”mousearea” v-on:mousemove=”move”></div>
A este div le daremos unas dimensiones mediante la clase CSS mousearea [2]:
.mousearea {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;