vue-awesome-swiper(基于swiper4)，事件回调中获取vue对象

内容转载，侵删
用于获取当前realIndex

在vue项目中，使用vue-awesome-swiper实现轮播业务。安装的vue-awesome-swiper是最新版本的，基于swiper4的实现。

问题
在最新的swiper中，swiper绑定的事件中，是通过this指向当前swiper对象的。而在事件回调中，我们需要获取vue页面data中的数据。但是此时的this并不指向vue对象。

解决
HTML:

<swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide v-if="imgList.length>0" v-for="(item,index) in imgList" :key='index'>
        <img :src="item.imgurl">
    </swiper-slide>
</swiper>

JS:

data() {
  return {
    swiperOption: {
      slidesPerView: 3,
      direction: 'vertical',
      loop: true,
      observer: true,
      observeParents:true,
      autoplay: {
        delay: 3000,
        disableOnInteraction: false
      },
      on: {
        slideChangeTransitionStart: ()=> {
          this.$nextTick(() => {
            let swiper = this.$refs.mySwiper.swiper;
            let i = swiper.realIndex;
            this.realI = i
          })
        }
      }
    }
  }
}