swiper を vueで使うときの現在のスライド番号の取得

はじめに

electronとvueを使って、デスクトップアプリを作る際、スライドショーが必要になったので、
swiperを入れて作ってみたところ、現在いるスライド番号を取得したくて調べていたら、
どの方法もうまくいかず、今回のこの方法でうまくいったので備忘録的に書きました。

環境

• vue 3.0.0
• swiper 6.8.4
• electron 13.0.0

取得方法

hoge.vue

<template>
<div>
  <swiper
    v-on:swiper="onSwiper"
    v-on:slideChange="onSlideChange">
    <swiper-slide>slide1</swiper-slide>
    <swiper-slide>slide2</swiper-slide>
  </swiper>
</div>
</template>

<script>
import {Swiper,SwiperSlide} from "swiper/vue"
import "swiper/swiper-bundle.min.css"
export default{
  name:'hoge',
  components:{Swiper,SwiperSlide},
  data(){
    return{
      swiper:null
    }
  }
  methods:{
    onSwiper(_swiper){
      this.swiper = _swiper
    }
    onSlideChange(){
      console.log(this.swiper.activeIndex)
    }
  }
}
</script>

Swiperの初期設定を知らせる v-on:swiper で、onSwiper が呼び出され、Swiperの情報が _swiper 変数に入るので、それを this.swiper に移して、vueの中で参照できるようにする。
スライドの遷移を知らせる v-on:slideChange で、onSlideChangeが呼び出されるので、this.swiper.activeIndex と記述すれば、現在のスライド番号を取得できる。

うまくいかなかった方法

各ライブラリのバージョンによるものや、ライブラリがそもそも違うかもしれませんが、
<swiper> タグに ref='mySwiper' という感じで ref を追加して、this.$refs.mySwiper.activeIndex とか、this.$refs.mySwiper.swiper.activeIndex とか、this.$refs.mySwiper.$swiper.activeIndex など色々と試してみたんですが、どれも undefined となってしまいました。

参考サイト

• Swiper Vue.js Components