[英]vue.js - How to split array of objects into multiple div columns
Here is my vue layout:这是我的 vue 布局:
<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:在像 Flask 和 Jinja 这样的基于 Python 的微框架中,可以这样做:
{% 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?那么,有没有办法在 vue.js 中做到像上面那样?
I'd use a computed property to chunk them up.我会使用计算属性将它们组合起来。 If you have
lodash
available you can do:如果您有可用的
lodash
,您可以执行以下操作:
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.如果你没有 lodash,你可以在所有地方找到分块的逻辑,这将起作用。
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>
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演示: https : //codesandbox.io/s/rj60o8l5p
v-for="(article,i) in articles"
和v-if="i>=0 && i<3"
Using .reduce you can break your array into groups of X.使用 .reduce 您可以将数组分成 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>
The simpler way to use lodash.chunk() function in your code is:在代码中使用 lodash.chunk() 函数的更简单方法是:
<template lang="pug">
.row(v-for="column in articles")
.col-4(v-for="article in column")
| {{ article.name }}
</template>
<script>
import lodash from "lodash"
export default {
name: 'Articles',
data() {
return {
articles: lodash.chunk([
{ name: 'Article 1' },
{ name: 'Article 2' },
{ name: 'Article 3' },
{ name: 'Article 4' },
{ name: 'Article 5' },
{ name: 'Article 6' },
], 3),
}
},
}
</script>
Refer here for a detailed explanation of lodash.chunk() function: https://dustinpfister.github.io/2017/09/13/lodash-chunk/ lodash.chunk() 函数的详细解释请参考: https ://dustinpfister.github.io/2017/09/13/lodash-chunk/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.