Vue CLI環境でSwiperを使用したときに、表示されているスライドのページ(Index)を取得したい

Question

Vue CLI環境でSwiperを使用したときに、表示されているスライドのページを取得したいです。

下記ドキュメントを参考にしてコードを書いています。
SwiperのVue環境での使い方リンク

実際にやりたいことは下記のイメージです。

  <swiper ...>
      <swiper-slide>Slide1</swiper-slide>
      <swiper-slide>Slide2</swiper-slide>
      <swiper-slide>Slide2</swiper-slide>
  </swiper>
  <input v-for="slide-no"> <!-- ここにスライドNoを表示させる -->

上のコードで言うと、slide-noのところに表示されているスライドのIndexを表記させたいのですが、swiperの外側にどうしても現在表示されているスライドのNoが持ち出せません。

ドキュメントを見ると、swiperのプロパティにrealIndexというものがあるので、

<template>
  <swiper :realIndex="hoge">

  ...
  
  </swiper>
<template>

<script>
export defult {
  data(): return {
     hoge: 0
  }
}
</script>

と打っても、hogeにIndexは格納されず、そもそもrealIndexはない、というエラーが出ます。

実際にやりたいのは、各ページごとにリストが表示されていて(配列)、表示されているリストにインプットで追加したいです。

Answer 1

SwiperのVueの項を読んで、swiperインスタンスを取得する方法が書いてあったので試したら無事にページ番号取得できました！

具体的には、

• controllerをセット
• @swiperでcontrollerにswiperをセット
• @slideChangeでswiperのrealIndexを取得

という形でした。

コードは下記のイメージです。

<swiper
    :controller="{ control: controlledSwiper }"    
    @swiper="setControlledSwiper"
    @slideChange="getRealIndex">

...

data(): {
  return {
    controlledSwiper: null
    realIndex: 0
  }
},
method:
  setControlledSwiper(swiper) {
    this.controlledSwiper = swiper
  },
  getRealIndex: function() {
    this.realIndex = this.controlledSwiper.realIndex
  }

...