How can I use v-for loop to iterate through columns with Vue.js
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.
<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>