v-for render or dont render <div> on {x} iteration

I did not find solution to my question anywhere and I can't figure it out. I have divs like this

<div class="columns">
  <div class="column">
   {looping content here}
  </div>
</div

Data is something like this:

{
   title: 'blabla'
   body: 'blabla'
   msg: 'blabla"
}

For responsive purposes I need 3 columns max side by side and then start another columns container that will stack columns underneath. So 3 column divs inside columns container and then create another columns div with 3 column divs inside and go until the array is empty.

I have tried computed count property but don't know how to iterate it inside of v-for. Also tried v-if but it didnt work as planned :(

Is it even possible in v-for? I dont know what approach to take to be honest.

Solution

Why not just insert each column inside a single columns container and then use CSS to wrap to a new row every 3 columns. The added benefit of this is that you can adjust the number of columns that appear in each row with media queries.

Try running the snippet below in full screen and the resize the browser to less than 576px wide to see the responsive columns.

new Vue({
  el: '#app',
  data () {
    return {
      columns: [
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        },
        {
          title: 'blabla',
          body: 'blabla',
          msg: 'blabla'
        }
      ]
    }
  }
})

.columns {
  display: flex;
  flex-wrap: wrap;
}

.column {
  box-sizing: border-box;
  padding: 1em;
  width: 33.3%;
}

/* on devices smaller than 576px, stack columns */
@media (max-width: 576px) {
  .column {
    width: 100%;
  }
}

<script src="https://unpkg.com/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <div class="columns">
    <div v-for="(column, index) in columns" class="column" :key="index">
      <h2>{{ column.title }}</h2>
      <p>{{ column.body }}</p>
      <strong>{{ column.msg }}</strong>
    </div>
  </div>
</div>