CODEWITHSUNDEEP
vue.jsbootstrap-vuev-for
jarr-head
jarr-head

Reputation: 13

How do I render a loop with 3 items and 2 columns, 1 in the fist column, and the other 2 in the 2nd column?

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>

Upvotes: 0

Views: 775

Answers (2)

harshit pandey
harshit pandey

Reputation: 126

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.

Upvotes: 1

Anmup Giri
Anmup Giri

Reputation: 170

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>

Upvotes: 0

Related Questions