Vue3结合Bootstrap5.2实现每屏3张卡片的Carousel轮播

原代码有3个核心错误导致布局错乱、轮播异常：

• DOM层级不符合Bootstrap Carousel规范：carousel-inner的直接子元素必须是.carousel-item，原代码额外套了一层.row作为直接子元素，导致Bootstrap的轮播显示/隐藏逻辑无法正确命中元素。
• 循环逻辑错误：原代码每遍历1条医生数据就生成1个独立的.carousel-item，等于每个轮播页只放1张卡片，和每屏3张的需求不符。
• 存在不规范属性与重复ID：data-bs-ride属性值写为true不符合Bootstrap 5.2官方规范，循环内写死id="doctorCard"会造成HTML ID重复，违反DOM规范。

核心思路是先把医生数据按每3个一组做拆分，再用两层循环渲染：外层循环遍历分组生成轮播项，内层循环遍历分组内的医生生成栅格卡片。

第一步：添加计算属性做数据分组 #

在Vue3组件的script部分添加计算属性，将前10条医生数据按每3个切分为二维数组，每个子数组对应一个轮播页的内容：

import { computed } from 'vue'
// 假设featuredDoctors是已定义的响应式数组数据源
const groupedDoctors = computed(() => {
  const perPageCount = 3
  const list = featuredDoctors.value.slice(0, 10)
  const groups = []
  for (let i = 0; i < list.length; i += perPageCount) {
    groups.push(list.slice(i, i + perPageCount))
  }
  return groups
})

第二步：修正模板DOM结构与循环逻辑 #

调整DOM层级，严格遵循Bootstrap Carousel的结构要求，用两层循环替换原有单层循环：

<div class="row mt-5 pt-5 m-0" id="carouselRow">
  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <!-- 外层循环：每个分组对应一个轮播项 -->
      <div
        class="carousel-item"
        :class="{ active: groupIndex === 0 }"
        v-for="(group, groupIndex) in groupedDoctors"
        :key="groupIndex"
      >
        <!-- 轮播项内部放置栅格行 -->
        <div class="row m-0">
          <!-- 内层循环：遍历当前分组的医生，每个卡片占1/3宽度 -->
          <div class="col-md-4 mb-3" v-for="doctor in group" :key="doctor.id">
            <div class="card h-100">
              <img
                :src="doctor.propicUrl"
                class="img-fluid card-img-top p-3"
                width="150"
                :alt="`${doctor.name} ${doctor.surname}`"
              >
              <div class="card-body text-center">
                <h5 class="card-title">{{ doctor.name }} {{ doctor.surname }}</h5>
                <p class="card-text text-muted">{{ doctor.category }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 轮播控制按钮 无需修改 -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">上一张</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">下一张</span>
    </button>
  </div>
</div>

• 给卡片添加h-100类，保证同一轮播页内的卡片高度统一，避免高低错位
• 内层循环的key优先使用医生数据的唯一标识（如doctor.id），不要用数组索引，避免Vue虚拟DOM渲染异常
• 修正了data-bs-ride的属性值为官方标准值carousel，移除了重复的固定ID
• 如果需要添加轮播指示器，可在外层循环时同步生成对应数量的指示器按钮，绑定data-bs-slide-to属性为对应分组索引即可
• 需确保项目中已正确引入Bootstrap 5.2的CSS和包含Popper依赖的JS bundle，否则轮播切换功能会失效

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