Vue3使用Bootstrap每行6个元素布局时出现标签未闭合报错

Vue模板编译器要求所有元素必须保持标签完整性，不能把<b-row>的起始和结束标签拆分到不同的条件模板中，这种写法会破坏模板结构，直接触发Element is missing end tag错误。

重构方案 #

正确的思路是先将数据源按每行6个元素分组，再基于分组后的数组渲染完整的<b-row>：

1. 添加计算属性分组数据
   在组件逻辑部分，通过计算属性将items拆分为每6个元素一组的二维数组：

import { computed } from 'vue'

export default {
  setup() {
    const items = /* 你的业务数据源 */
    
    const groupedItems = computed(() => {
      const result = []
      for (let i = 0; i < items.length; i += 6) {
        result.push(items.slice(i, i + 6))
      }
      return result
    })

    return { groupedItems }
  }
}

2. 修改模板渲染逻辑
   基于分组后的数组，直接渲染完整的<b-row>和内部的<b-col>：

<main role="main" class="container-fluid">
  <div class="container">
    <b-row v-for="(group, idx) in groupedItems" :key="idx">
      <b-col v-for="(item, itemIdx) in group" :key="itemIdx">
        {{ item.name }}
      </b-col>
    </b-row>
  </div>
</main>

补充说明 #

• 计算属性groupedItems会随items的变化自动重新分组，确保视图与数据同步。
• 每个<b-row>都是完整闭合的标签，完全符合Vue模板语法规范，彻底解决标签错误。
• 最后一组元素不足6个时，Bootstrap的栅格系统会自动适配布局，无需额外处理。

内容的提问来源于stack exchange，提问作者Scott Robinson