CODEWITHSUNDEEP
ionic-frameworkslidevuejs3
frederico messias
frederico messias

Reputation: 1

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

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());
    }
  },

Upvotes: 0

Views: 812

Answers (1)

Aaron Saunders
Aaron Saunders

Reputation: 33335

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(),
    };
  },```

Upvotes: 1

Related Questions