La renderització de llistes és una funcionalitat fonamental en Vue.js que permet mostrar col·leccions de dades de manera dinàmica. En aquesta secció, aprendrem com utilitzar la directiva v-for per iterar sobre arrays i objectes, i com gestionar claus úniques per a cada element de la llista.

1. Directiva v-for: Utilitzada per iterar sobre arrays i objectes.
2. Claus úniques (key): Necessàries per a una renderització eficient i per mantenir l'estat dels elements de la llista.
3. Iteració sobre arrays: Com iterar i mostrar elements d'un array.
4. Iteració sobre objectes: Com iterar i mostrar propietats d'un objecte.

La directiva v-for s'utilitza per renderitzar una llista d'elements repetint un bloc de codi per a cada element de l'array o objecte.

En aquest exemple, items és un array i item representa cada element de l'array. La directiva v-for crea un element <li> per a cada element de items.

Suposem que tenim un array de tasques i volem mostrar-les en una llista:

1. HTML: Utilitzem la directiva v-for per iterar sobre l'array tasks i crear un element <li> per a cada tasca.
2. JavaScript: Definim una instància de Vue amb un array tasks en el seu data.

És important utilitzar l'atribut :key per proporcionar una clau única per a cada element de la llista. Això ajuda Vue a identificar de manera eficient els elements quan la llista canvia.

A més d'iterar sobre arrays, també podem iterar sobre les propietats d'un objecte utilitzant v-for.

1. HTML: Utilitzem v-for per iterar sobre les propietats de l'objecte user. key representa el nom de la propietat i value el seu valor.
2. JavaScript: Definim una instància de Vue amb un objecte user en el seu data.

Crea una aplicació Vue que mostri una llista de productes amb el seu nom i preu.

Solució

Crea una aplicació Vue que mostri una llista de tasques amb el seu nom i estat (completada o no completada).

Solució

1. Oblidar la clau (key): No proporcionar una clau única pot causar problemes de rendiment i comportaments inesperats.
2. Utilitzar índexs com a claus: Evita utilitzar l'índex de l'array com a clau, ja que pot causar problemes quan l'ordre dels elements canvia.
3. No gestionar correctament els canvis en la llista: Assegura't de gestionar correctament l'addició, eliminació i actualització d'elements en la llista per evitar inconsistències.

La renderització de llistes amb Vue.js és una tècnica poderosa que permet mostrar col·leccions de dades de manera dinàmica i eficient. Utilitzant la directiva v-for i proporcionant claus úniques per a cada element, podem crear aplicacions Vue que gestionin llistes de manera efectiva. Amb els exercicis pràctics, hauràs adquirit una comprensió sòlida de com utilitzar aquestes tècniques en les teves pròpies aplicacions.