如何在Bootstrap-Vue的b-col和b-row中使用v-for？

问题描述

我们如何将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-for Component进行了“ 50/50”列拆分，但是其余的Component被“分解”了，不再放在左侧的{{1} }区域。看起来像这样：

我不想要的东西，它的外观

如何通知布局将两列并排放置在所有b-column项目中，而不是仅在第一列中？

在此先感谢您提供任何见解或提示！同时，我将继续阅读：）

解决方法

您可以创建一个嵌套容器，并使用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的帮助！