Как получить текущий индекс предмета в v-карусели?

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-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

Answer 2

Вероятно, лучше всего использовать 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>