В элементе VUE отсутствует закрывающий тег

Вместо этого вы можете реструктурировать его так:

<template>
  <main role = "main" class = "container-fluid">
    <div class = "container">
      <template v-for = "(row, rowIndex) in itemRows" :key = "rowIndex">
        <b-row>
          <template v-for = "(item, itemIndex) in row" :key = "itemIndex">
            <b-col>
              {{ item.name }}
            </b-col>
          </template>
        </b-row>
      </template>
    </div>
  </main>
</template>

<script setup>
const items = ref([
  {
    name: "Hello",
  },
// add as many more elements as you'd like
]);

const itemRows = computed(() => {
  const rows = [];
  for (let i = 0; i < this.items.length; i += 6) {
    rows.push(this.items.slice(i, i + 6));
  }
  return rows;
});
</script>

По сути, используйте вычисляемое свойство itemRows, чтобы разделить массив элементов на фрагменты по 6.

Эта реструктуризация гарантирует, что каждый элемент содержит ровно 6 элементов, а все оставшиеся элементы (если общее количество элементов не кратно 6) будут помещены в последнюю строку.

Вот мой результат:

Надеюсь, это поможет. Если у вас есть еще вопросы, дайте мне знать.

Это так не работает, в Vue.js нельзя разбивать такие html-теги. Сначала надо разбить массив на части, а затем запустить их в 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>

Игровая площадка Vue SFC

То, что вы пытаетесь сделать, это сделать строки 6 элементов на 6 элементов из исходного массива. Для этого вы можете использовать алгоритм, который обычно называется chunks.

Он принимает на вход массив элементов, а также максимальное количество элементов на фрагмент (назовем его n) и возвращает массив массивов элементов, длина которых равна n, за исключением последнего, имеющего ограничение length <= n поскольку вы не сможете разделить свой массив равномерно.

Так:

// Some JS file
export const function chunks(arr, maxItemsPerChunk) {
  let currChunk = [];
  const chunksArr = arr.reduce((chunks, item, i) => {
    if (i !== 0 && i % maxItemsPerChunk === 0) {
      // The current chunk has reached its limit
      // therefore we push it into the results
      // and update the new current chunk to contain the current item
      chunks.push(currChunk);
      currChunk = [item];
    } else {
      // The current chunk hasn't reached its limit
      // just yet, so we push the item into it
      currChunk.push(item);
    }

    return chunks;
  }, []);

  if (currChunk.length) {
    // If there are leftovers, that means the
    // number of items in the array was not
    // divisible by maxItemsPerChunk.
    // Thus we push the last chunk whose length
    // is strictly less than maxItemsPerChunk
    chunksArr.push(currChunk);
  }

  return chunksArr;
}

И используйте его в своем компоненте следующим образом:

<!-- The vue component -->
<script setup>
import { chunks } from "...";
const items = /* [...] */;

const chunkedItems = computed(() => chunks(items, 6));
</script>

<template>
<main role = "main" class = "container-fluid">
    <div class = "container">
        <!-- TODO: Find a better key for the chunks -->
        <b-row v-for = "(chunk, index) in chunks" :key = "index">
            <!-- TODO: Find a better key for the items -->
            <b-col v-for = "(item, index) in chunk" :key = "index">
                {{ item.name }}
            </b-col>
        </b-row>
    </div>
</main>
</template>