[英]vue.js - How to split array of objects into multiple div columns
這是我的 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>
目標是:
<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>
在像 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 %}
那么,有沒有辦法在 vue.js 中做到像上面那樣?
我會使用計算屬性將它們組合起來。 如果您有可用的lodash
,您可以執行以下操作:
computed: {
chunked () {
return _.chunk(this.articles, 3)
},
},
如果你沒有 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
}
然后,你可以這樣做:
<div class="row" v-for="chunk in chunked">
<div class="col-4" v-for="article in chunk">
{{ article.name }}
</div>
</div>
我會使用輔助組數組來呈現行中的文章組:
<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>
v-for="(article,i) in articles"
和v-if="i>=0 && i<3"
使用 .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>
在代碼中使用 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>
lodash.chunk() 函數的詳細解釋請參考: https ://dustinpfister.github.io/2017/09/13/lodash-chunk/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.