[Vuejs]-Split an array and display in rows and columns?

0👍

I think this can be one of the simpliest options. First, append the chunk module from lodash. Is really small:

<script src="https://unpkg.com/lodash@4.17.4/chunk.js"></script>

Now, split your array to array of chunks. For example:

var items = ['a', 'b', 'c', 'd', 'e', 'f']
var items = _.chunk(items, 3)

As result of this operation is array in this form:

var items = [['a', 'b', 'c'], ['d', 'e', 'f']]

Done. You can now use it with v-for directive, with second, nested v-for directive. For example:

<row v-for="row, ridx in items" :key="ridx">
  <cell v-for="cell, cidx in row" :key="cidx"></cell>
</row>

Leave a comment