vue-awesome-swiper怎么在同一个Vue页面使用多个swiper?

Question

想要在同一个vue做多个轮播切换，而且想要获得每一个swiper当前所切换到的activeIndex。
单个的时候知道怎么获取activeIndex，但是有多个的时候要怎么做？怎么去区分它们？

<template>
<div>
<swiper  :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item,index) in listdata" :key="index"> 
{{item}}
 </swiper-slide>   
</swiper>   
</div>
</template>

import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    components:{
        swiper, 
        swiperSlide
    },
    data(){
       return{
             swiperOption: {
                pagination: {
                    el: '.swiper-pagination'
                },
                on:{
                    slideChangeTransitionEnd:()=>{
                        console.log(this.swiper.activeIndex)
                        } 
                    }
            },
       } 
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    }
 }   

Answer 1

1.多个时候用用多个options，在你写的slideChangeTransitionEnd事件里获取对应的activeIndex
2.也可以多个的时候多个ref，直接通过ref注册slideChangeEnd事件，在事件里获取activeIndex，看你的swiper版本