Bucles for con v-for
Como en muchos lenguajes de programación, en las vistas de Vue también podemos tener bucles, en este caso para pintar varios elementos en el HTML. Vamos a verlo con un ejemplo:
<template>
<ul class="list">
<li v-for="(item, i) in elements" :key="i">
ID: {{ item.id }} - {{ item.name }}
</li>
</ul>
</template>
<script>
export default {
data: () => ({
elements: [
{ name: "Elemento 1", id: 1 },
{ name: "Elemento 2", id: 2 },
{ name: "Elemento 3", id: 3 },
],
}),
};
</script>
<style scoped></style>
En este ejemplo lo que hago es declarar una variable llamada elemets inicializada con un array de objetos. En la vista lo que hago es crear una lista <ul> y dentro cada uno de los items con un v-for para que se cree un loop y se pinten.
Dentro del v-for lo que hago es recorrer el array de objetos, en este caso entre paréntesis pongo (item, i). Estos son los nombres que yo he decidido para estas variables, pero tu puedes poner los que quieras. Veamos qué se guarda en las variables:
- "item" es el nombre que le he puesto a la variable que contendrá cada uno de los items, a medida que avanza el bucle este valor va cambiando para que lo puedas pintar.
- "i" es el nombre que le he puesto a la variable contador, es decir, en cada paso del bucle esta variable contendrá el número del item que se está pintando, es decir, para el primer elemento "i" vale 0, para el segundo vale 1 etc.
Otro detalle a tener en cuenta en los bucles es la key. Vue recomienda que siempre con el bucle for se utilice una key que sea única para cada item del bucle. Lo que hago es crear la key con el valor de la variable "i" del contador para que cada item tenga una key única. Esto sirve para que Vue pueda identificar correctamente cada item del bucle. :key="i"
Por último dentro de cada <li> meto con la notación punto cada propiedad de cada item que quiero pintar (id y name).
Si abres la página con este ejemplo podrás ver que se crea una lista que pinta cada uno de los elementos definidos dentro del array elements. Si modificas el array y metes nuevos objetos verás que se añaden sin tener que crear nuevos <li>. Es decir el bucle for duplicará la etiqueta HTML sobre la que esté declarado (li en este ejemplo) por cada una de las iteracciones del bucle.
Pero cuidado porque en la vista hemos dicho que pinte el id y el name de los arrays y si metes elementos en el array que no tengan estas propiedades no se pintarán.
Como podrás suponer, los v-for también se pueden anidar:
<template>
<ul class="list">
<li v-for="(item, i) in elements" :key="i">
ID: {{ item.id }} - {{ item.name }} | childrens:
<span v-for="(children, j) in item.childrens" :key="'child' + j">
{{ children }},
</span>
</li>
</ul>
</template>
<script>
export default {
data: () => ({
elements: [
{ name: "Elemento 1", id: 1, childrens: [1, 3, 4] },
{ name: "Elemento 2", id: 2, childrens: [3, 5, 5] },
{ name: "Elemento 3", id: 3, childrens: [5, 7, 3] },
],
}),
};
</script>
<style scoped></style>Aquí para el segundo bucle he decidido crear la key con la unión de un string 'child' y el contador del segundo array para que se único para cada hijo y no coincida con los del padre.