Vuejs v-for add boot line every 5 items

Question

I have an array of elements such as "Item 1", "Item 2" to "Item 25". I want the HTML after rendering to look like this:

<div class="row"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> </div> <div class="row"> <div>Item 6</div> <div>Item 7</div> <div>Item 8</div> <div>Item 9</div> <div>Item 10</div> </div> 

What is the correct way to express this in vue.js?

  <div class="row"> <span v-for="(item, index) in items"> // do something like this in vue.js style: // if (item % 5 == 0) print "</div><div class='row'>" <app-field >{{ item }}</app-field> </span> </div> 

Answer 1

Or you can do the same using lodash _.chunk() , which to me personally seems more readable.

Template:

 <div class="columns" v-for="chunk in productChunks"> <div class="column is-one-quarter" v-for="product in chunk"> // stuff </div> </div> 

Then

  computed: { productChunks(){ return _.chunk(Object.values(this.products), 4); } }, 

Personally, I import lodash all over the world, since I use it so often in main.js:

 import _ from 'lodash' 

Remember to " npm install --save lodash "

Answer 2

You can try the following:

  <div class="row" v-for="i in Math.ceil(items.length / 5)"> <span v-for="item in items.slice((i - 1) * 5, i * 5)"> {{item}} </span> </div> 

See a working example:

 new Vue({ el: '#demo', data: { items: [ 'item 1', 'item 2', 'item 3', 'item 4', 'item 5', 'item 6', 'item 7', 'item 8', 'item 9', 'item 10', 'item 11', 'item 12', 'item 13', 'item 14', 'item 15', 'item 16', 'item 17', 'item 18', 'item 19', 'item 20', 'item 21', 'item 22', 'item 23', 'item 24', 'item 25' ] } }) 

 .row { border: solid 1px #404040; padding: 10px; } 

 <script src="https://vuejs.org/js/vue.min.js"></script> <div id="demo"> <div class="row" v-for="i in Math.ceil(items.length / 5)"> <span v-for="item in items.slice((i - 1) * 5, i * 5)"> {{item}} </span> </div> </div> 

Answer 3

In addition to the above example, which I consider to be quite suitable, I would define calculations as calculated properties and methods for more readable code. See JSFiddle :

  computed:{ rowCount() { return Math.ceil(this.items.length / this.itemsPerRow); } }, 

Answer 4

A slightly improved answer, with npm install --save lodash .

 <template> <div class="content"> <div class="row" v-for="chunk in productChunks"> <product-thumbnail :product="sp" v-for="sp in chunk" class="col-4"></product-thumbnail> </div> </div> </template> import lodash from 'lodash'; export default { name: "ProductList", components: { "product-thumbnail": ProductThumbnail }, data() { return { sps: [], itemsPerRow: 4 } }, async mounted() { let resp = await; //call api this.sps = results; }, computed: { productChunks() { return lodash.chunk(Object.values(this.sps), this.itemsPerRow); } } } 

Answer 5

I just put the solution here in the latest version of Bulma. The is-multiline modifier does its job here.

 <div class="columns is-multiline"> <div class="column is-one-third" v-for="customer in customers"> {{ customer.name }} </div> </div> 

source: https://forum.vuejs.org/t/v-for-with-css-responsive-grid/7164/4