JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div id="app">
  <div class="row" v-for="i in rowCount">
    <span v-for="item in itemCountInRow(i)">
  {{item}}
</span>
  </div>
</div>

CSS

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

JavaScript

new Vue({
  el: '#app',
  data: {
    itemsPerRow:5,
    items: []
  },
  computed:{
    rowCount:function(){     
      return Math.ceil(this.items.length / this.itemsPerRow);
    },
  },
  methods:{
    itemCountInRow:function(index){
     return this.items.slice((index - 1) * this.itemsPerRow, index * this.itemsPerRow)
    }
  },
  mounted() {
  	for (let i = 0; i < 45; i++) {
    	this.items.push(
      	'category ' + i
      )
    }
  }
})