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