Discussion :

[Gumbraise]

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Séb.]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Gumbraise]

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