v-carousel에서 현재 항목 색인을 가져오려면 어떻게 해야 합니까?

v-carousel에서 현재 항목 색인을 가져오려면 어떻게 해야 합니까?

아래 carousel을 순환시키는 코드를 가지고 있는데, 이미지 위에 아이템 제목을 표시해 두고 싶습니다.이 방법은 회전목마가 변경될 때마다 갱신되는 새로운 데이터 값을 생성하는 것입니다.하지만 어떻게 해야 할지 모르겠어요.

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

적절한 최선의 방법은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>

아래 예시와 같이 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_advantes_of_v-model_binding 대신 using_change_event_event_event_of_binding을 참조하십시오.

언급URL : https://stackoverflow.com/questions/59947666/how-to-get-current-item-index-in-v-carousel