Pass the index of the active slide when changed, vuejs 3 ionic4 - ionic-framework

Question

I'm trying to pass the index of active slide when he change, in ionic-framework using vuejs 3, but i don't know how.
Someone can please help me?
<ion-slides :options="slideOpts" #ionSlideDidChange="SomeAction()" >
<ion-slide v-for="(item, index) in imgsSrc" :key="index">
<img :src="item" alt="" srcset="" >
</ion-slide>
</ion-slides>
I try to use getActiveIndex(), the native method, with ref="slider" but i get an error saying that getActiveIndex() is not a function.
methods:{
SomeAction(){
console.log(this.$refs.slider.getActiveIndex());
}
},

Answer 1

After the slides are initialized and loaded, get the object and assign it to a ref in the didLoad function; you will then have access to the Swiper object and can utilize the documented API if you like
<ion-slides
#ionSlideDidChange="change"
#ionSlidesDidLoad="didLoad"
:options="slideOpts"
>
<ion-slide v-for="(item, index) in ['1', '2', '3', '4']" :key="index">
<div class="my-slide">
<p>item {{ item }}</p>
</div>
</ion-slide>
setup() {
const _swiper = ref<any>(null);
return {
slideOpts: {
speed: 400,
},
_swiper,
didLoad: (e: any) => {
_swiper.value = e.target.swiper;
console.log(_swiper.value);
},
change: () => {
console.log(_swiper?.value?.activeIndex);
},
router: useRouter(),
};
},```