目前我必须使用VuetiFy和VueJS实现一个carousel，但是我需要将默认图像设置为不同于数组的第一个元素，这取决于某些条件。
特别是，我有一个Comment模型与幻灯片模型的一个元素相关的（某条信息）（包含图像的模型）。此幻灯片还通过其他元素与其他幻灯片相关联。因此，当我需要查看某个注解时，我必须显示其对应的幻灯片以及该幻灯片的所有父级幻灯片顺序，但是将直接相关的一个显示为默认（或初始幻灯片）。
例如，注解N与12张幻灯片的数组中的第7张幻灯片相关，因此，在轮播中，应该呈现12张幻灯片，但开头的焦点应该在第7张幻灯片上。
在组件中，我有这样的内容：

<script setup lang="ts">
import { isNullOrUndefined } from '@core/utils/index'
import API_MEDIA_URL from '@/plugins/media_url'
import api from '@axios'
...
const props = defineProps(['comments', 'evalmode'])

const openedPanels = ref<number[]>([])
const slides = ref()

onMounted(() => {
  openedPanels.value = [0]

  api.get(`comment/slides/${props.comments[0].id}`).then(response => {
    slides.value = response.data
  })
})

watch(props, (newQ) => {
  openedPanels.value = [0]
})
</script>

<template>
...
<VExpansionPanels
  v-if="!isNullOrUndefined(slides) && 
    !isNullOrUndefined(props.comments)"
  multiple 
  v-model="openedPanels"
  >
  <VExpansionPanel
    v-for="comment in props.comments"
    :key="comment.id"
    v-model="openedPanels"
    >
      <v-row>
        <v-col>
          <v-card-actions class="justify-center">
            <v-carousel hide-delimiters :progress="true">
              <v-carousel-item
                v-for="(slide,i) in slides"
                  :key="i"
                  :src="API_MEDIA_URL+slide.src"
                  cover
                  ></v-carousel-item>
            </v-carousel>
          </v-card-actions>
        </v-col>
      </v-row>
  </VExpansionPanel>
</VExpansionPanels>
...
</template>