如何将 `v-for` 与 Bootstrap-Vue 的 `b-col` 和 `b-row` 一起使用？

Question

我们如何将 Bootstrap-Vue 布局合并到一个 v-for 中，然后输出到一个导入的 Vue 组件中？

这是我尝试过的设置...

<b-container>
  <b-row>
    <b-col sm="6">
      ...
    </b-col>
    <b-col sm="6" v-for="item in items">
      <ComponentName></ComponentName>
    </b-col>
  </b-row>
</b-container>

目的是得到一个看起来像这样的结果：

我想要什么

但结果不同。它为第一个v-forComponent 拆分“50/50”列，但其余的Component 被“断开”并且不再放置在左侧b-column 区域旁边。它看起来像这样：

我不想要的，目前的样子

如何通知布局让两列并排穿过所有 v-for 项目，而不仅仅是第一列？

提前感谢您提供任何见解或提示！与此同时，我会继续阅读:)

Answer 1

您可以创建一个嵌套容器并使用 v-for 循环遍历其行：

<b-container>
  <b-row>
    <b-col sm="6">
      ...
    </b-col>
    <b-col sm="6" >
    <b-container >
     <b-row v-for="item in items"> 
      <b-col sm="12" >
         <ComponentName></ComponentName>
       </b-col>
     </b-row>
    </b-container>
    </b-col>
  </b-row>
</b-container>

---

@Spectator6 编辑：

感谢@Boussadjra 的评论，我发现我放错了v-for 指令。而不是在“父”列上使用它，它应该包含一个新的“子”行，并在那里应用v-for 指令。所以最终结果看起来像这样：

<b-container>
  <b-row>
    <b-col sm="6">
      ...
    </b-col>
    <b-col sm="6">
      <b-row v-for="item in items">
        <ComponentName></ComponentName>
      </b-row>
    </b-col>
  </b-row>
</b-container>

再次感谢@Boussadjra 的帮助！