Вставить элемент после каждого n-го элемента в цикле v-for

Question

Я перебираю список продуктов и показываю их на карточках.Я хотел бы отобразить рекламную акцию после каждого 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-го элемента без его замены?

Answer 1

Чтобы сохранить сетку 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>

Answer 2

Я думаю, вам просто нужно удалить v-else здесь, внутри элемента карты продукта

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