v-for 루프의 n번째 항목마다 항목 삽입

v-for 루프의 n번째 항목마다 항목 삽입

상품 일람을 반복하여 카드에 표시하고 있습니다.18번째 제품이 나열될 때마다 프로모션을 표시하고 싶습니다.

<div
     v-for="(prod, index) in products"
       :key="index"
       class="w-full md:w-1/3 lg:w-1/4 xl:w-1/4 mb-8 px-2
     >
     <promotion v-if="(index % 18 == 0) && index != 0" ></promotion>
     <product-card v-else :product="prod"></product-card>
</div>

현재 작성 방법으로는 프로모션이 표시되지만 일치하는 인덱스가 있는 아이템 대신 삽입됩니다.프로모션을 교체하지 않고 n번째 항목 앞이나 뒤에 배치하려면 어떻게 해야 합니까?

그리드 css를 유지하기 위해 그리드 css를template및 사용v-for

<template v-for="(prod, index) in products">
  <div class="w-full md:w-1/3 lg:w-1/4 xl:w-1/4 mb-8 px-2" 
        v-if="(index % 18 == 0) && index != 0" 
        :key="'promotion-${index}'">
    <promotion></promotion>
  </div>
  <div class="w-full md:w-1/3 lg:w-1/4 xl:w-1/4 mb-8 px-2" 
      :key="'product-${index}'">
    <product-card :product="prod"></product-card>
  </div>
</template>

제품 카드 요소 안에 있는 v-else만 제거하면 될 것 같습니다.

<product-card :product="prod"></product-card>

언급URL : https://stackoverflow.com/questions/54640883/insert-item-after-every-nth-item-in-v-for-loop