vue 多了一层div,vue.js-如何将对象数组拆分为多个div列

Here is my vue layout:

.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 }}

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' },

]

}

},

}

The Goal is:

article[0].name

article[1].name

article[2].name

article[3].name

article[4].name

article[5].name

In Python based Micro Framework like Flask and Jinja, it's possible to do in this way:

{% for article_row in articles | batch(3, ' ') %}

{% for article in article_row %}

{{ article }}

{% endfor %}

{% 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:

.container

.row(v-for="(group, i) in articleGroups")

.col-4(v-for="article in articles.slice(i * itemsPerRow, (i + 1) * itemsPerRow)")

| {{ article.name }}

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())

}

},

}