更改时传递活动幻灯片的索引，vuejs 3 ionic4答案

【问题标题】：Pass the index of the active slide when changed, vuejs 3 ionic4更改时传递活动幻灯片的索引，vuejs 3 ionic4
【发布时间】：2021-01-23 02:05:39
【问题描述】：

当他改变时，我试图在使用 vuejs 3 的 ionic-framework 中传递活动幻灯片的索引，但我不知道如何。

有人可以帮帮我吗？

<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>

我尝试将本机方法 getActiveIndex() 与 ref="slider" 一起使用，但我收到一条错误消息，指出 getActiveIndex() 不是函数。

    methods:{
    SomeAction(){
      console.log(this.$refs.slider.getActiveIndex());
    }
  },

【问题讨论】：

标签： ionic-framework slide vuejs3

【解决方案1】：

幻灯片初始化加载完成后，在didLoad函数中获取对象并赋值给一个ref；然后，您将可以访问 Swiper 对象，并且可以根据需要使用记录在案的 API

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

【讨论】：