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

Question

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.

Answer 1

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>

Answer 2

It's possible to nest v-for loops if the data is correctly formatted.
For example, an array (for the first v-for) of objects (for the second loop):
new Vue({
el: "#app",
data() {
return {
items: [
{
title: 'Title 1',
body: 'body 1',
msg: 'message 1'
},
{
title: 'Title 2',
body: 'body 2',
msg: 'message 2'
}
]
}
}
})
.columns {
align-items: center;
display: flex;
height: 40px;
justify-content: space-around;
width: 50%;
}
<script src="https://unpkg.com/vue#2.6.8/dist/vue.min.js"></script>
<div id="app">
<div class="columns" v-for="item in items">
<div class="column" v-for="(value, key) in item">
<div>{{ value }}</div>
</div>
</div>
</div>