javascript - 如何在 v-carousel 中获取当前项目索引？

Question

我有以下循环轮播的代码，这很好，但我希望能够在图像顶部显示下方的项目标题。我认为这样做的方法是创建一个新的数据值，每次轮播更改时都会更新该数据值。但是，我不知道该怎么做。

<v-carousel>
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{currentTitle}}</v-card-title>


<script>
export default {
  data: () => ({
      currentTitle: '',
      servicesCarouselItems: [
        {
          name: "Title1",
          src: require('../../1.jpeg'),
        },
        {
          name: "Title2",
          src: require('../../2.jpeg'),
        },
        {
          name: "Title3",
          src: require('../../3.jpeg'),
        }
      ],
  })
}
</script>

Answer 1

可能最好的方法是使用 v-model - 当前项目的索引在那里公开...

<v-carousel v-model="currentIndex">
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{ currentTitle }}</v-card-title>

<script>
export default {
  data: () => ({
      currentIndex: 0,
      servicesCarouselItems: [
        {
          name: "Title1",
          src: require('../../1.jpeg'),
        },
        {
          name: "Title2",
          src: require('../../2.jpeg'),
        },
        {
          name: "Title3",
          src: require('../../3.jpeg'),
        }
      ],
  }),
  computed: {
    currentTitle() {
      return this.servicesCarouselItems[this.currentIndex].name
    }
  }
}
</script>