listas en vue

Listas en Vue.js

por

Otra de las funcionalidades esenciales de Vue.js es la posibilidad de mapear o imprimir arrays de elementos con la directiva v-for y mostrarlo en forma de listas.

La directiva v-for requiere de una sintaxis específica para recorrer un array «item in items«, lo que viene a ser «cada elemento del conjunto de elementos».

¿Cómo mostramos un listado en el DOM de HTML?, pues con algún listado ul al que le podemos aplicar a la etiqueta li la directiva v-for junto con esta sintaxis especial:

<div id="app">
    <ul>
    	<li v-for="name in names">{{ name }}</li>
    </ul>
</div>
var app = new Vue({
   el: "#app",
   data: {
	names: ["John", "Mary", "Lukasz", "Aneta"]
   },
});

Dentro de nuestro data tenemos un array llamado «names» con un conjunto de nombres. Este conjunto se recorre e imprime por pantalla cada elemento en forma de listado.

La directiva v-for es capaz de aceptar también un segundo argumento para mostrar el índice de los elementos padre.

<div id="app">
    <ul>
    	<li v-for="(name, index) in names">{{ index }} - {{ name }}</li>
    </ul>
</div>

V-for para objetos

Supongamos que tenemos un objeto dentro de nuestro data con una serie de propiedades. Un objeto «persona» que tiene «nombre», «apellidos» y «edad». Con v-for podemos también iterar entre cada uno de las propiedades de un objeto. 

var app = new Vue({
   el: "#app",
   data: {
	person: {
		firstname: "John",
		lastname: "Doe",
		age: "29"
	}
   }
});
<div id="app">
    <ul>
    	<li v-for="value in person">{{ value }}</li>
    </ul>
</div>

Si también queremos mostrar la propiedad del objeto, podemos agregar como segundo argumento una key que imprima el nombre de cada propiedad: 

<div id="app">
    <ul>
    	<li v-for="(value, key) in person">{{ key }}: {{ value }}</li>
    </ul>
</div>

Métodos mutadores

Vue proporciona métodos manipulares de listas con los que agregar, eliminar, ordenar, etc. Estos métodos son:

  • pop()
  • push()
  • sort()
  • Shift()
  • unshift()
  • splice()
  • reverse()

Y hasta aquí se ha aprendido de manera muy básica a manipular listas en Vue.js, donde gracias a la direcvita v-for se nos permite recorrer listados de elementos.

Deja un comentario