Del curso: Vue.js esencial

Directiva v-for para generar listas - Tutorial de Vue.js

Del curso: Vue.js esencial

Comenzar mi mes de prueba gratis Comprar para mi equipo

Directiva v-for para generar listas

“

En Vue, las directivas son atributos HTML especiales que nos permiten modificar el comportamiento del DOM. En esta lección, te voy a explicar sobre la directiva v-for. La directiva v-for es la que utilizamos para renderizar listas dinámicas, como la que ves en pantalla. Esta lista que ves aquí proviene de un arreglo. Ya aquí dentro del código, puedes notar como yo estoy utilizando la directiva para renderizar la lista. Dentro de la propiedad data, tengo un arreglo de strings, y luego aquí estoy generando la lista a partir de este arreglo de items. Yo estoy utilizando el v-for para duplicar el li por cada uno de los elementos dentro del arreglo. La directiva v-for utiliza una sintaxis especial para renderizar los elementos. Aquí yo estoy utilizando la sintaxis para poder substraer el index de cada uno de los elementos. Puedes notar que yo agrego paréntesis y pongo un nombre a la variable que va a contener el elemento actual a la hora de hacer la iteración dentro de los items y luego otra variable que va a contener el index del elemento. Luego utilizamos la palabra clave in y luego pasamos el nombre del arreglo. El index se utiliza para agregar un atributo key al elemento. Esto es un requisito que Vue tiene para poder identificar cada uno de los elementos dentro del v-for. Luego aquí puedes notar que yo estoy utilizando la nomenclatura de doble llave para poder mostrar los elementos dentro de la página. Con esta sintaxis, entonces, obtenemos el resultado que vistes anteriormente. Esta aplicación que ves en pantalla también utiliza un v-for para poder generar todas las filas dentro de esta tabla. Aquí ya dentro del código, yo estoy utilizando la directiva v-for para recorrer un arreglo que contiene objetos. Este arreglo se llama tiquetes. Aquí yo no estoy obteniendo el index, por lo tanto, yo solamente tengo que pasar un nombre de la variable que va a contener el objeto tiquete que se está evaluando. Igualmente, utilizo un key para poder identificar la fila. Y aquí con esta variable, entonces yo puedo renderizar cada uno de los elementos dentro del objeto, como puedes notar aquí.

Contenido