I have the following in Vue3 where I'm trying to put items into a bootstrap row and each row should contain 6 items. However, VueJS doesn't like me doing this! It complains that my first <b-row> contains a missing closing tag (which it does by design!) :
[plugin:vite:vue] Element is missing end tag.
How would I need to restructure this to play ball nicely in VUE?
<main role="main" class="container-fluid">
<div class="container">
<template v-for="(item, index) in items">
<template v-if="index == 0 || index % 6 == 0">
<b-row>
</template>
<b-col>
{{ item.name }}
</b-col>
<template v-if="(index != 0 && index % 6 == 0) || index == items.length">
</b-row>
</template>
</template>
</div>
</main>
It doesn't work like that, in Vue.js you cannot break such html tags.. First you have to break the array into pieces and then run them in a v-for:
<script setup>
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
const chunkArray = (arr, size) => arr.reduce((acc, _, index) => {
if (index % size === 0) {
acc.push(arr.slice(index, index + size));
}
return acc;
}, []);
const chankItems = chunkArray(items, 6);
</script>
<template>
<main>
<div v-for="items in chankItems">
<span v-for="el in items">
{{ el }};
</span>
</div>
</main>
</template>