javascript - Insert item after every nth item in v-for loop - Stack Overflow

admin管理员组

文章数量:1406060

I am iterating through a list of products and displaying them in cards. I'd like to display a promotion after every 18th product listed:

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

The way I have this written now, the promotion is displayed but it is inserted in place of the item with the matching index. How do I place the promotion before or after the nth item without replacing it?

I am iterating through a list of products and displaying them in cards. I'd like to display a promotion after every 18th product listed:

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

The way I have this written now, the promotion is displayed but it is inserted in place of the item with the matching index. How do I place the promotion before or after the nth item without replacing it?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow asked Feb 11, 2019 at 23:55 retrograderetrograde 2,97966 gold badges3131 silver badges5454 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

To preserve grid css, you can put them under a template and use 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>

I think you just need to remove the v-else here inside the product-card element

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

本文标签： javascriptInsert item after every nth item in vfor loopStack Overflow