Afficher des listes

• 4 minutes

L’utilisation de données implique souvent des tableaux ou d’autres types de collections. En règle générale, vous itérez au sein de tous les éléments d’une collection à l’aide d’une forme de boucle. Vue.js prend en charge les boucles par le biais d’une directive appelée v-for.

Présentation de la directive v-for

Pour afficher tous les éléments d’une liste, vous pouvez utiliser la directive v-for. v-for se comporte comme une boucle for...of en JavaScript. La directive itère au sein d’une collection, en donnant accès à chaque élément par le biais de la variable que vous déclarez.

La syntaxe de v-for ressemble à celle-ci :

v-for="itemName in collectionName"

collectionName est le nom du tableau dans votre objet de données. Pour chaque itération, itemName adopte l’identité de votre élément actuel. Pour utiliser v-for dans un modèle, vous ajoutez la directive à l’intérieur d’une déclaration d’élément. Ainsi, l’élément HTML est répété autant de fois que le nombre d’éléments inclus dans le tableau.

Utiliser v-for dans une application

Pour utiliser la directive v-for dans une application, vous devez effectuer deux opérations :

• Exposez un tableau par le biais de votre objet de données. Pour utiliser la directive v-for, vérifiez qu’il existe des données de type tableau retournées par votre méthode data().
• Ajoutez la directive v-for à un élément. Ajoutez la directive v-for à un élément HTML. Pour afficher les données du tableau, utilisez la syntaxe des doubles accolades ({{ }}).

Supposons que vous voulez exposer un tableau de noms dans votre objet de données :

Vue.createApp({
    data() {
        return {
            names: ['Susan', 'Peter', 'Bill' ]
        }
    }
}).mount('#demo');

Si vous voulez afficher les éléments, vous pouvez utiliser le code suivant :

<ul id="demo">
    <li v-for="name in names">{{ name }}</li>
</ul>

Quand le code s’affiche, tous les noms figurant dans le tableau apparaissent :

• Susan
• Peter
• Bill

Clés et état

Si les données sont modifiées, Vue.js a besoin de pouvoir actualiser les parties appropriées de l’affichage. Quand vous utilisez une liste, il est préférable de mettre à jour l’élément individuel plutôt que la liste entière. Pour permettre à Vue.js de rechercher un élément individuel, donnez une clé à chaque élément affiché. Vous n’avez pas besoin d’ajouter la clé à votre objet de données : vous pouvez la générer en utilisant l’index du tableau.

Vous pouvez obtenir l’index en mettant à jour la déclaration v-for, comme illustré dans le code suivant :

<ul id="demo">
    <li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>

index est incrémenté pour chaque élément inclus dans le tableau. La directive :key stocke la clé pour Vue.js, ce qui lui permet de mettre à jour l’élément individuel au fur et à mesure des modifications.