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

时间:2019-02-11 23:55:20

标签: javascript vue.js vuejs2

我正在遍历产品列表并将其显示在卡片中。我想在列出的每18个产品之后显示一个促销:

def findMatch(self, text, start=0):
    i = 0
    while i < len(text):
        if text[i] == self._pattern[0]:
            j = 0
        while j < len(self._pattern):
            if text[i + j] == self._pattern[j]:
                j += 1
            else:
                break

我现在编写的方式是显示促销信息,但它会插入具有匹配索引的项目的位置。如何将促销放在第n个项目之前或之后而不替换它?

2 个答案:

答案 0 :(得分:2)

我认为您只需要删除product-card元素内的v-else

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

答案 1 :(得分:2)

要保留网格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>