How can i cut this code via v-for Vue JS? - vue.js

Question

Can`t reduce this code via v-for:
<v-menu v-model="menu" :close-on-content-click="false" offset-y>
<v-container fluid class="pt-0">
<v-row>
<v-col class="pt-0">
<v-checkbox v-for="item in types.slice(0,6)" :key="item.type" hide-details :label="item.name"></v-checkbox>
</v-col>
<v-col class="pt-0">
<v-checkbox v-for="item in types.slice(6,12)" :key="item.type" hide-details :label="item.name"></v-checkbox>
</v-col>
<v-col class="pt-0">
<v-checkbox v-for="item in types.slice(12,18)" :key="item.type" hide-details :label="item.name"></v-checkbox>
</v-col>
</v-row>
</v-container>
</v-menu>
types: [
{ type: 0, name: 'Item_1' },
{ type: 1, name: 'Item_2' },
{ type: 2, name: 'Item_3' },
{ type: 3, name: 'Item_4' },
{ type: 4, name: 'Item_5' },
{ type: 5, name: 'Item_6' },
{ type: 6, name: 'Item_7' },
{ type: 7, name: 'Item_8' },
{ type: 8, name: 'Item_9' },
{ type: 9, name: 'Item_10' },
{ type: 10, name: 'Item_11' },
{ type: 11, name: 'Item_12' },
{ type: 12, name: 'Item_13' },
{ type: 13, name: 'Item_14' },
{ type: 14, name: 'Item_15' },
{ type: 15, name: 'Item_16' },
{ type: 16, name: 'Item_17' },
{ type: 17, name: 'Item_18' },
{ type: 18, name: 'Item_19' },
]
Codepen example: https://codepen.io/aurorame/pen/WNdjxYM
Try to make it via use v-for in v-col, but how to slice it correctly?

Answer 1

You could use v-for in a range (starts at index 1), and calculate the splice indexes for the three rows:
<v-col class="pt-0" v-for="i in 3">
<v-checkbox v-for="item in Object.keys(items).slice((i-1)*3, (i-1)*3+6)" :key="item" hide-details :label="items[item].label"></v-checkbox>
</v-col>
demo

Answer 2

You can achieve that goal via "computed properties" of Vue. Here is the code that works for me:
<template>
<v-app>
<v-menu v-model="menu" :close-on-content-click="false" offset-y>
<v-container fluid class="pt-0">
<v-row>
<v-col class="pt-0" v-for="(newItem, index) in eachPart" :key="index">
<v-checkbox v-for="item in newItem" :key="item.type" hide-details :label="item.name"></v-checkbox>
</v-col>
</v-row>
</v-container>
</v-menu>
</v-app>
</template>
<script>
export default {
name: "LoopView",
data() {
return {
menu: true,
/* here you define the number of column. you can change it to 3 */
part: 4,
types: [
{ type: 0, name: 'Item_1' },
{ type: 1, name: 'Item_2' },
{ type: 2, name: 'Item_3' },
{ type: 3, name: 'Item_4' },
{ type: 4, name: 'Item_5' },
{ type: 5, name: 'Item_6' },
{ type: 6, name: 'Item_7' },
{ type: 7, name: 'Item_8' },
{ type: 8, name: 'Item_9' },
{ type: 9, name: 'Item_10' },
{ type: 10, name: 'Item_11' },
{ type: 11, name: 'Item_12' },
{ type: 12, name: 'Item_13' },
{ type: 13, name: 'Item_14' },
{ type: 14, name: 'Item_15' },
{ type: 15, name: 'Item_16' },
{ type: 16, name: 'Item_17' },
{ type: 17, name: 'Item_18' },
{ type: 18, name: 'Item_19' },
],
}
},
computed: {
typesLength: function () {
return this.types.length;
},
eachPart: function () {
/* you can also use "Math.floor" if that is more suitable for your design */
let chunkSize = Math.ceil( this.typesLength / this.part );
let partArr = []
for (let i = 0; i < this.typesLength; i += chunkSize) {
const chunk = this.types.slice(i, i + chunkSize);
partArr.splice(i, 0, chunk);
}
return partArr
}
}
}
</script>
<style scoped>
</style>