M'intercaler dans une boucle v-for

Bonjour, je cherche un moyen pour rentrer dans la boucle for. Dit comme ça vous ne comprenez surement pas donc je vous explique du mieux que je peux ici.

En PHP Wordpress j'ai fait ça un jour:

Code:

---

1 2 3 4 5 6 7 8 9 10

<?php $i = 0; while ( $loop->have_posts() ) : $loop->the_post(); $i ++; if ( $i % 2 != 0 ) : echo "BONJOUR"; else: echo "AU REVOIR"; endif; endwhile; ?>

---

Ce code renvoie 1 fois sur 2 BONJOUR et l'autre fois AU REVOIR

J'aimerais faire la même avec VueJS. Pour l'instant j'ai ça:

Code:

---

1 2 3 4 5

<item-card v-for="product in products" :key="product.id" :product="product" />

---

Ce qui renvoie tous les "products" 1 par 1. Mais j'aimerais m'intercaler entre tous les 4 products pour rajouter du code HTML.

Est-ce possible de le faire ?

Merci d'avance pour vos réponses.

Tu peux récupérer l'index en 2nd paramètre de boucle v-for, ensuite dans la boucle un v-if % devrai faire l'affaire ;)

Code:

---

1 2 3 4 5 6

<template v-for="(product, i) in products" :key="product.id"> <item-card :product="product"/> <template v-if="(i + 1) % 4 === 0"> <p>Intercalage tous les 4 produits (tour de boucle {{ i }})</p> </template> </template>

---

Bonjour et merci beaucoup. Vous me sauvez la vie si je puis dire.
Une bonne journée à vous.