如何在Vuetify/VueJS轮播组件中设置指定默认初始幻灯片？

云上老周

2026-7-30

实现Vuetify轮播默认显示指定幻灯片

要让轮播默认聚焦到评论关联的幻灯片，核心是通过v-model控制Vuetify轮播的当前索引，具体实现步骤如下：

1. 新增响应式变量控制当前幻灯片索引

在<script setup>中添加用于存储当前显示幻灯片索引的响应式变量：

const currentSlide = ref(0)

2. 获取幻灯片后定位到关联项

假设你的Comment模型包含关联幻灯片的唯一标识（如slide_id），在接口返回幻灯片数据后，找到对应项的索引并赋值给currentSlide：

onMounted(() => {
  openedPanels.value = [0]
  const targetComment = props.comments[0]
  api.get(`comment/slides/${targetComment.id}`).then(response => {
    slides.value = response.data
    // 匹配评论关联的幻灯片索引
    const targetIndex = slides.value.findIndex(slide => slide.id === targetComment.slide_id)
    // 找到有效索引则更新，否则保持默认0
    if (targetIndex !== -1) {
      currentSlide.value = targetIndex
    }
  })
})

3. 监听props变化时重新定位

当props.comments更新时，重新获取幻灯片并同步更新当前索引：

watch(props, (newProps) => {
  openedPanels.value = [0]
  const targetComment = newProps.comments[0]
  api.get(`comment/slides/${targetComment.id}`).then(response => {
    slides.value = response.data
    const targetIndex = slides.value.findIndex(slide => slide.id === targetComment.slide_id)
    currentSlide.value = targetIndex !== -1 ? targetIndex : 0
  })
}, { deep: true }) // 深度监听props对象变化

4. 模板中绑定轮播当前索引

给<v-carousel>添加v-model绑定currentSlide，实现索引控制：

<v-carousel hide-delimiters :progress="true" v-model="currentSlide">
  <v-carousel-item
    v-for="(slide,i) in slides"
    :key="i"
    :src="API_MEDIA_URL+slide.src"
    cover
  ></v-carousel-item>
</v-carousel>