Search code examples
javascriptvue.jssails.jsbulma

How can I use v-for loop to iterate through columns with Vue.js

I'm trying to list dozens of special offers with a v-for loop. I have a grid setup with columns, with 3 columns appearing in each column. Currently it only shows the first 3 items as I'm not sure how to refactor the code to create another set of columns after 3 items.

How can I have the v-for loop create another set of columns after every 3rd item?

The image below shows how the markup looks with 5 specials. As you can see they all appear in one row.

Thanks a lot

    <div class="columns">
        <div v-for="s in specials" class="column is-one-third">
            <div class="card">
                <div class="card-content">
                    {{s.specialDetail}}
                </div>
            </div>
        </div>
    </div>

enter image description here

Solution

  • Looks like you're using Bulma CSS.

    Problem:

    Bulma columns dont wrap to a new row by default.

    Solution:

    Add the class is-multiline to your columns container and it should wrap your columns automagically.

    Bulma Reference

        <div class="columns is-multiline">
        <div v-for="s in specials" class="column is-one-third">
            <div class="card">
                <div class="card-content">
                    {{s.specialDetail}}
                </div>
            </div>
        </div>
    </div>