0

I'm trying to loop through 3 photos, that should be output in 2 columns. The 1st photo in the first column and then the remaining 2 in the 2nd, inside a row. There will be multiple rows of the same type of data.

This is what I have so far, but each image renders in a separate column.

    <b-row>
      <template v-for="(item, index) in slice.items">
        <b-col :key="item.id" v-if="index == 0" class="gallery-item">
          <img :field="item.photo" class="img-fluid"/>
        </b-col>
        <template v-if="index == 1 || index == 2">
          <b-col :key="item.id" class="gallery-item">
            <img :field="item.photo" class="img-fluid"/>
          </b-col>
        </template>
      </template>
    </b-row>
jarr-head
  • 13
  • 2

2 Answers2

1

This will work for you.

<b-row v-for="slice in allSlices">
   <b-col class="gallery-item">
       <img :field="slice.items[0].photo" class="img-fluid"/>
   </b-col>

    <b-col>
      <b-row v-for="(item, index) in slice.items.slice(1, slice.items.length)">
        <b-col :key="item.id" class="gallery-item">
           <img :field="item.photo" class="img-fluid"/>
        </b-col>
      </b-row>
    </b-col>      
</b-row>

I have considered 2 fixed columns.

First column: It will contain the data at index 0 (slice.items[0]).

Second column: It will contain the dynamic data (it will show remaining slice.items values).

Please check this link for output.

harshit pandey
  • 126
  • 6
0

Why don't you try this? 

   <b-row>
    <b-col :key="item.id" class="gallery-item">
      <img :field="slice.items[0].photo" class="img-fluid"/>
    </b-col>
   </b-row>

   <b-row>
    <template v-for="(item, index) in slice.items.slice(1, slice.items.length)">
      <b-col :key="item.id" class="gallery-item">
        <img :field="item.photo" class="img-fluid"/>
      </b-col>
     </template>
    </b-row>
Anmup Giri
  • 160
  • 9