En Vue.js la renderización iterativa nos permite mostrar una lista de elementos a partir de una colección de datos en el JavaScript.
Por ejemplo, si tienes una lista de nombres, Vue puede crear un elemento visual para cada nombre de la lista sin que tengas que escribirlos uno por uno.
Si la colección cambia (por ejemplo, añades o eliminas un elemento), Vue actualizará automáticamente el contenido mostrado..
Directiva v-for
La directiva v-for nos permite iterar sobre una lista de elementos y renderizarlos en pantalla.
v-for="item in lista"Donde
- “item” es el nombre de la variable que representa cada elemento de la lista
- “lista” es la lista en sí.
Vamos a verlo con un ejemplo,
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.nombre }}</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, nombre: 'Manzana' },
{ id: 2, nombre: 'Banana' },
{ id: 3, nombre: 'Cereza' },
]);
</script>En este ejemplo,
- Cada elemento de la lista se renderizará como un
<li>dentro de un<ul>. - La propiedad
:keyes necesaria para ayudar a Vue a identificar cada elemento de la lista de manera única y optimizar el rendimiento.
Valor Key
En Vue, cuando usamos la directiva v-for, es altamente recomendable proporcionar una clave única (key) para cada elemento iterado (y en algunos casos necesario).
Esto es así porque Vue necesita una forma de identificar cada elemento en la lista para realizar un seguimiento eficiente de los cambios.
Esta clave suele ser el index (índice) del elemento en la lista o un identificador único como un id.
¿Qué pasa si no usas key?
Si no proporcionas una key, Vue emitirá una advertencia en la consola y usará el index implícitamente.
Sin embargo, esto puede llevar a problemas como:
- Pérdida de estado: Si los elementos tienen estado interno (como inputs), Vue puede perderlo al reordenar o eliminar elementos.
- Ineficiencia: Vue puede recrear elementos en lugar de reutilizarlos, lo que afecta el rendimiento.
Que podemos usar como Key
Dado que siempre vamos a tener usar un :key en nuestro v-for, tenemos que ver qué opciones tenemos para usar como key.
Tenemos dos opciones principales.
- Un Identificador único en el objeto (si tiene)
- El
indexdel array (siempre disponible)
En muchas ocasiones, nuestro objeto ya tiene un identificador único. Por ejemplo, por que tiene un Id, o un Guid, etc, que usamos al guardar en un base de datos.
En ese caso, tiene sentido usar el propio Id del elemento como Key.
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>Si nuestro elemento no tiene su propi identificador único, a veces es suficiente con usar el index del elemento en la lista. Así,
<ul>
<li v-for="(item, index) in items" :key="index">
{{ item }}
</li>
</ul>Cada uno tendrá sus ventajas y desventajas
| Criterio | id | index |
|---|---|---|
| Facilidad | Más complejo (el objeto tiene que tener Id) | Simple |
| Cambiar el orden | ✅ Mantiene el estado correctamente | ❌ Puede asociar mal el estado |
| Eliminar o añadir elementos | ✅ Se maneja correctamente | ❌ Puede causar errores |
| Reordenar elementos | ✅ Funciona bien | ❌ Puede dar resultados inesperados |
| Cuándo usar | Listas dinámicas | Listas estáticas |
- Usa un identificador único (
id) si el objeto tieneid. - Si no, usa
indexsolo en listas estáticas y sencillas. - Si es necesario, añade un
idal objeto tu mismo.