Boucle v-for¶

Boucle¶

Vue permet de parcourir un tableau [ ] d'objets {prop:value} grâce à la directive v-for. Par son nom, on remarque que c'est une boucle for de native de Vue.js qui permet de parcourir les éléments d'un tableau (array).

Pour cela, on doit :

Définir un nom temporaire qui représentera chaque objet du tableau.
Indiquer le tableau à parcourir.

Par exemple, pour accéder à chaque rôle contenu dans le tableau rolesArray:

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

Ici, role est l’objet courant de la boucle. Si l’on veut accéder à une propriété de cet objet (comme picture, firstName, lastName), on les préfixe avec role: role.picture, role.firstName, role.lastName

See the Pen DEMO VueJS | boucle by TIM Montmorency (@tim-momo) on CodePen.

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>

See the Pen DEMO VueJS | boucle index by TIM Montmorency (@tim-momo) on CodePen.

Combinaison d'une boucle avec des événements et méthodes¶

On peut utiliser v-for pour générer plusieurs éléments. Sur chacun de ces éléments, on peut attacher un ou des événements (par exemple @click, @mouseover, etc.).

Lorsque cet événement déclenche une méthode, on peut lui fournir comme paramètre l’objet “courant” de la boucle (l’élément de la collection que l’itération est en train de traiter), afin que la méthode sache sur quel objet agir.

Dans l'exemple suivant, au clic du bouton, on appelle la méthode toggleOrange() en lui passant comme paramètre l'objet courant de la boucle, soit role. Rappelez-vous, role est le nom temporaire qu'on a choisi lorsqu'on défini la boucle v-for quelques lignes plus haut:

See the Pen DEMO VueJS | boucle index by TIM Montmorency (@tim-momo) on CodePen.

🤼‍♂️ v-if ne s'accorde pas avec v-for

On ne doit jamais combiner v-if et v-for sur une même balise. Au besoin, il est possible d'ajouter une balise <template> en guise d'intermédiaire pour ajouter le v-forou le v-if.

```html title = "🚫 Interdit"

{{ user.name }}

```html title = "✅ Valide"
<ul>
  <template v-for="user in users">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

En savoir plus sur Rendu de liste - List Rendering

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)

See the Pen Vue Transitions - Shuffle Deck of Cards by TIM Montmorency (@tim-momo) on CodePen.

Exercices¶

Lien à venir