Boucles v-for

Boucle

Vue permet de boucler sur un tableau d'objets grâce à la directive v-for. Pour ce faire, il faut spécifier le nom temporaire que l'on souhaite attribuer à chaque objet dans le tableau et spécifier le tableau dans lequel ce trouve ces objets.

Par exemple, il est possible d'accéder à chaque rôle se trouvant dans le tableau rolesArray:

<div v-for="role in rolesArr"> <img :src="role.picture"> </div>

Par la suite, il faut spécifier si la propriété désirée est enfant du parent data ou enfant du rôle courant dans la boucle en la préfixant par role.

Index

Afin d'obtenir l'index courant dans une boucle v-for, il est suffit d'ajouter un 2e paramètre dans la directive. Puisque deux paramètres sont présents, il est nécessaire de les grouper dans entre parenthèses.

Par exemple:

<div v-for="(role, index) in rolesArr"> <img :src="role.picture"> </div>
Combinaison d'une boucle avec des événements

Il est possible de combiner une boucle avec des événements sans problème, simplement en spécifiant en paramètre à la méthode appelée l'objet devant être altéré.

Il ne faut jamais utiliser v-if sur un élément ayant v-for.
Rendu de liste Récapitulatif de ce que on a Vue.js jusqu'à maintenant

Analysons ensemble cet exemple de brassage de carte réalisé par le développeur Torontois Hassan Dj (@itslit)

EXERCICE Vue - Ouest VS Est Afin d’afficher quel rappeur appartenait à quel camp est ou ouest, vous devrez compléter une app Vue.