Renderizar listas en Vue.js deja de ser un trabajo manual cuando entiendes la directiva v-for. Aquí verás cómo construir una lista de publicaciones tipo red social, asignar identificadores únicos con key y aprovechar la reactividad para que tu DOM se actualice solo cuando hace falta.

¿Cómo se construye la estructura base de una lista de publicaciones?

Partimos del ejemplo de la clase anterior, donde ya existe un if visible que confirma que la persona inició sesión. Justo debajo del nombre, queremos mostrar las publicaciones recientes.

El primer paso es pensar en dos niveles de marcado: un contenedor para toda la lista y un elemento individual para cada publicación. Esa separación te permite aplicar estilos sin que choquen entre sí.

Dentro del template añadimos un div con clase list como contenedor y, dentro, otro div con clase item que tendrá un título (h4 convertido luego en div para evitar variaciones entre navegadores) y un párrafo con el contenido.

¿Por qué cambiar el h4 por un div? Para evitar los estilos por defecto que cada navegador aplica a los encabezados y mantener un control consistente del CSS en Chrome, Firefox o Safari.

¿Qué estilos mínimos necesita la lista?

Con CSS muy básico ya se ve ordenada:

• display: flex y flex-direction: column en .list para apilar los items en vertical.
• border: 1px solid black en .item para separar visualmente cada publicación.
• font-weight: bold y un tamaño un poco mayor en el título para jerarquizar la información.

Esto es suficiente para que cada publicación se lea como una tarjeta independiente antes de meternos con la lógica.

¿Cómo funciona la directiva v-for en Vue.js?

Duplicar divs a mano funciona con dos publicaciones, pero no con veinte. Aquí entra v-for, una directiva que se comporta como el for de JavaScript pero dentro del template [05:50].

La fuente de datos vive en data (o en una propiedad computada). En el ejemplo creamos un arreglo posts donde cada elemento es un objeto JSON con title y description:

js data() { return { posts: [ { title: 'Post 1', description: 'Descripción 1' }, { title: 'Post 2', description: 'Descripción 2' }, { title: 'Post 3', description: 'Descripción 3' }, { title: 'Post 4', description: 'Descripción 4' } ] } }

En el template, en lugar de repetir el bloque cuatro veces, lo escribes una sola y aplicas la directiva:

html

<div class="item" v-for="item in posts"> <div>{{ item.title }}</div> <p>{{ item.description }}</p> </div>

Vue recorre el arreglo y dibuja un item por cada objeto. La sintaxis item in posts es la misma idea que ya conoces de un for tradicional: item es la variable temporal que representa cada elemento.

¿Qué es v-for en Vue.js? Es una directiva que renderiza un bloque de HTML una vez por cada elemento de un arreglo u objeto declarado en el componente, evitando duplicar marcado manualmente.

¿Por qué siempre debes usar el atributo key?

Cuando una lista cambia, Vue necesita saber qué elemento agregar, cuál eliminar y cuáles dejar intactos. Sin un identificador único, la opción más segura para el framework es redibujar toda la lista, lo que es ineficiente.

El atributo key resuelve eso. Le pasas un valor único por elemento y Vue solo toca en el DOM lo que realmente cambió.

La sintaxis ampliada del v-for permite obtener también el índice:

html

<div class="item" v-for="(item, i) in posts" :key="i" > <div>{{ item.title }}</div> <p>{{ item.description }}</p> </div>

Puedes usar el índice i, pero si tus objetos tienen un id propio, ese suele ser mejor candidato porque sobrevive al reordenar la lista.

¿Qué pasa si no pongo key en un v-for? Vue puede redibujar elementos que no cambiaron al actualizar la lista, gastando renders innecesarios y perdiendo estado interno de los nodos.

¿Cómo aprovecha la reactividad este patrón?

Las listas en Vue son reactivas. Si haces posts.push(nuevoPost) o eliminas un elemento del arreglo, la interfaz se actualiza sola sin que tengas que tocar el DOM.

Eso significa que un formulario que agregue publicaciones al vuelo, o un botón que borre una, se reflejan en pantalla en tiempo real gracias al sistema de reactividad de Vue combinado con el key único.

Conceptos y habilidades que aparecen en la clase

Estos son los puntos técnicos que conviene fijar:

• Directivas condicionales y de lista: ya viste v-if en la clase anterior; ahora sumas v-for para iterar arreglos.
• Estructura contenedor + item: separar .list y .item facilita aplicar flexbox y bordes sin acoplar estilos.
• Objetos JSON dentro de data: cada publicación es un objeto con title y description, accedido con item.title e item.description [06:30].
• Atributo key: se enlaza con :key y debe ser un identificador único, idealmente un id del objeto, aunque el índice i funciona como alternativa.
• Reactividad de arreglos: agregar o eliminar elementos del arreglo posts dispara el re render automático de la lista.

Ahora viene tu turno: arma un formulario con campos de título y descripción, un botón que haga push a posts y, si te animas, otro botón por item que elimine esa publicación del arreglo. Cuéntame en los comentarios cómo resolviste la parte de borrar usando el índice o un id propio.