如何在 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>

Answer 2

我设法通过使用 v-on:change / @change Vue 事件解决了这个问题，如下例所示。

<v-carousel @change="currentTitle = servicesCarouselItems[$event].name">
  <v-carousel-item
    v-for="(item,i) in servicesCarouselItems"
    :key="i"
    :src="item.src"
  >

  </v-carousel-item>
</v-carousel>

感兴趣的读者可以继续阅读： https://renatello.com/get-selected-value-on-change-in-vuejs/#The_advantages_of_using_change_event_instead_of_v-model_binding