How to to use `v-for` with Bootstrap-Vue's `b-col` and `b-row`?

user_5474201 0
Viewed 3757

How can we incorporate Bootstrap-Vue layouts into a v-for that outputs into an imported Vue component?

This is the setup I've tried...

<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>

The intent is to get a result that looks something along these lines:

What I DO want

Intended Outcome

But the result is different. It does the "50/50" column split for the FIRST v-for Component, but the remaining Component's are "broken out" and no longer placed beside the left b-column area. It looks something like this:

What I do NOT want, how it currently looks

Actual Outcome

How can I inform the layout to keep the two columns side by side through all of the v-for items, rather than just the first?

Thank you in advance for any insights or tips! In the meantime, I'll keep reading :)

bootstrap-vue vue.js layout
1 Answers

You could create a nested container and loop through its rows using 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>

Edit by @Spectator6:

Thanks to @Boussadjra's comment, I discovered I was mis-placing the v-for directive. Rather than use it on the "parent" column, it should contain a new "child" row, with the v-for directive applied there. So the end result looks something like this:

<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>

Thanks again for your help @Boussadjra!

user_81728570
Related