Vue.js数组循环中，如何在指定组件后插入元素？

你可以通过将v-for循环移到包裹容器上，让<component>和<p>都属于循环的一部分，这样就能直接访问迭代变量i了。推荐使用<template>作为包裹容器，因为它不会渲染成额外的DOM节点，不会影响页面布局。

修改后的代码示例： #

<div class="grid">
  <template v-for="(item, i) in items" :key="item.id">
    <component
      :is="item.component"
      :index="i"
      :image="item.image"
      :to="item.to"
      :image-secondary="item.imageSecondary"
      :title="item.title"
      :date="item.date"
      :talent="item.talent"
      :excerpt="item.excerpt"
      class="block"
    />
    <!-- 现在能直接访问迭代变量i了 -->
    <p v-if="i === 2">PRINTED AFTER 3RD COMPONENT</p>
  </template>
</div>

原理说明： #

• 把v-for绑定到<template>上后，循环的每一次迭代都会生成<component>和对应的<p>标签（仅当i=2时显示），完美对应你PHP写法里的逻辑——每输出一个item就判断是否要插入额外内容。
• 这种方式完全遵循Vue的响应式开发规范，不需要手动操作DOM，也不用修改组件内部结构。

如果不想用<template>，也可以用普通<div>作为包裹容器，但会多一层DOM节点，可能需要调整CSS布局，所以<template>是更优选择。

内容的提问来源于stack exchange，提问作者Eric