Here is my vue layout:
<template lang="pug">
.row
.col-4(v-for="article in articles") // need to render 1-3 items here
| {{ article.name }}
.row
.col-4(v-for="article in articles") // need to render 4-6 items here
| {{ article.name }}
</template>
<script>
export default {
name: 'Articles',
data() {
return {
articles: [
{ name: 'Article 1' },
{ name: 'Article 2' },
{ name: 'Article 3' },
{ name: 'Article 4' },
{ name: 'Article 5' },
{ name: 'Article 6' },
]
}
},
}
</script>
The Goal is:
<div class="row">
<div class="col-4">article[0].name</div>
<div class="col-4">article[1].name</div>
<div class="col-4">article[2].name</div>
</div>
<div class="row">
<div class="col-4">article[3].name</div>
<div class="col-4">article[4].name</div>
<div class="col-4">article[5].name</div>
</div>
In Python based Micro Framework like Flask and Jinja, it's possible to do in this way:
{% for article_row in articles | batch(3, ' ') %}
<div class="row">
{% for article in article_row %}
<div class="span4">{{ article }}</div>
{% endfor %}
</div>
{% endfor %}
So, is there a way to do like above in vue.js?
I would use helper groups array to render groups of articles in rows:
<template lang="pug">
.container
.row(v-for="(group, i) in articleGroups")
.col-4(v-for="article in articles.slice(i * itemsPerRow, (i + 1) * itemsPerRow)")
| {{ article.name }}
</template>
<script>
export default {
name: 'Articles',
data() {
return {
itemsPerRow: 3,
articles: [
{ name: 'Article 1' },
{ name: 'Article 2' },
{ name: 'Article 3' },
{ name: 'Article 4' },
{ name: 'Article 5' },
{ name: 'Article 6' },
]
}
},
computed: {
articleGroups () {
return Array.from(Array(Math.ceil(this.articles.length / this.itemsPerRow)).keys())
}
},
}
</script>
Demo: https://codesandbox.io/s/rj60o8l5p
I'd use a computed property to chunk them up. If you have lodash
available you can do:
computed: {
chunked () {
return _.chunk(this.articles, 3)
},
},
You can find the logic for chunking all over the place if you don't have lodash around this will work.
function chunk (arr, len) {
const chunks = []
const i = 0
const n = arr.length
while (i < n) {
chunks.push(arr.slice(i, i += len))
}
return chunks
}
Then, you can do:
<div class="row" v-for="chunk in chunked">
<div class="col-4" v-for="article in chunk">
{{ article.name }}
</div>
</div>
a combination of v-for="(article,i) in articles"
and v-if="i>=0 && i<3"
Using .reduce you can break your array into groups of X.
<template>
<div class="container">
<template v-for="group in groupedArticles">
<div class="row">
<span v-for="article in group">
{{ article.title }}
</span>
</div>
</template>
</div>
</template>
<script>
export default {
data: function() {
return {
articles: [
{ id: 1, title: 'Hello People' },
{ id: 2, title: 'What Time is it?' },
{ id: 3, title: 'Dogs & Cats' }
],
itemsPerRow: 2
}
},
computed: {
groupedArticles: function() {
return this.articles.reduce((accumulator, article, index) => {
if (index % this.itemsPerRow == 0) {
accumulator.push([article]);
} else {
accumulator[accumulator.length - 1].push(article);
}
return accumulator;
}, []);
}
},
}
</script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With