在 v-for 循环中的每第 n 个项目之后插入项目

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，您可以将它们放在 a 下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>