在v-for循环的某个索引上添加一个空div

Question

我正在通过计算变量将一系列产品项传递到收集页面上的收集项组件中。在第三个产品之后，我希望有一个空的收藏品，即。收集项目模板，但其中没有产品内容。如果有人对我如何在Vue.js中实现这一目标有任何想法，我将不胜感激。

collection page:

        <collection-item
          v-for="product in products" 
          :collection-item="product"
        ></collection-item>

Answer 1

您可以将<collection-item包装在模板中，然后循环v-for，然后在v-if上添加collection-item条件

<template>
  <section>
    <template v-for="(row, index) in rows">
      <collection v-if="index !== 3" :key="index"></collection>
      <div v-else :key="index">something else if needed or remove</div>
    </template>
  </section>
</template>

codesandbox：

https://codesandbox.io/s/cocky-wood-qglqe?file=/pages/index.vue:0-216

Answer 2

[如果您知道它永远是您想要此空项目之后的第三个产品，那么您可以循环使用外部容器（例如div）而不是collection-item，然后将v-if与index property available from v-for（链接的Vue文档上的第二个示例）。

index

理论上，您也可以在第三个位置将空产品拼接到数组中，这会产生相同的效果，但是如果纯粹出于视觉原因，可能不如将其添加到模板中那么清晰。

最后一点，每当在自定义组件上使用v-for时，必须（自Vue v2.2.0起）都包含v-for属性，以帮助Vue区分其呈现的列表元素。对于所有元素来说，这应该是唯一的，例如

<div v-for="(product, index) in products">
    <collection-item :collection-item="product" />
    <collection-item v-if="index == 2" />
</div>

，但是key也可以在不引起问题的情况下工作。