V-for with css responsive grid

I would like to populate css responsive grid (bulma css) using vue.js

I would like to have 3 columns in each row

the expected result

<div class="columns">
    <div class="column">Customer 1</div>
    <div class="column">Customer 2</div>
    <div class="column">Customer 3</div>
</div>

<div class="columns">
    <div class="column">Customer 4</div>
    <div class="column">Customer 5</div>
    <div class="column">Customer 6</div>
</div>

the nearest I can do so far is

<div v-for="(c, index) in customers">
    <div v-if="index == 0 || index % 3 == 0" class="columns">
        <div class="column">
            {{ c }}
        </div>

        <div class="column">
            {{ c }}
        </div>

        <div class="column">
            {{ c }}
        </div>
    </div>        
</div>

but I still cannot resolve how to iterate to the next 2 items in each row

please guide thanks

save yourself some trouble and just use somethink like chunk

computed: {
  chunkedCustomers() {
    return chunk(this.customers, 3)
  }
}

this will procude a nested array: [[{customer}, {customer}, {customer}], [...], [...]]

So now you cn loop over this with a nested v-for

<div class="columns" v-for="customers in chunkedCustomers">
    <div class="column" v-for="customer in customers">
      {{customer.name}}
   </div> 
</div>
6 Likes

I would suggest preparing the data using a computed value, but to use the solution you’re going for, you only need to use index {{ customers[index+2] }} with the varied offset instead of the object {{ c }}

<div v-for="(c, index) in customers">
    <div v-if="index == 0 || index % 3 == 0" class="columns">
        <div class="column" >
            {{ customers[index] }}
        </div>

        <div class="column">
            {{ customers[index+1] }}
        </div>

        <div class="column">
            {{ customers[index+2] }}
        </div>
    </div>        
</div>

you could also use

<div v-for="index in customers.length />

as you don’t really need the customer object in this case

only make sure that the item is within index by checking the length

{{ customers.length > index+1 ? customers[index+1] : '' }}
{{ customers.length > index+2 ? customers[index+2] : '' }}
1 Like

The easiest way to achieve this with the newest version of Bulma is:

<div class="columns is-multiline" v-for="customer in customers">
    <div class="column is-one-third">
      {{ customer.name }}
    </div>
</div>

is-multiline does here the trick.
Hope it helps.

The solution of @LinusBorg is elegantly working too. You would have to import Lodash though.

1 Like

Thank you very much. Brilliant!
Just we need to put v-for="customer in customers" at the class “column” instead of “columns”

<div class="columns is-multiline">
    <div class="column is-one-third" v-for="customer in customers">
      {{ customer.name }}
    </div>
</div>

Genius solution. Worked like an absolute charm.