vue使用swiper组件获得activeIndex后，如何实现实时监听activeIndex，如果发生变化则设置flag属性为false

Question

vue使用swiper组件获得activeIndex后，如何实现实时监听activeIndex，如果发生变化则设置flag属性为false

      <swiper :options="swiperOption" ref="Myswper">
        <swiper-slide v-for="card in itemcard" :key="card.id">
          <img>//循环数据展示
        </swiper-slide>
      </swiper>

  data () {
    return {
      // swiper默认配置
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 30,
        centeredSlides: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex)
                        // 切换结束时，告诉我现在是第几个slide
          }
        }
      }
     }
    }

watch: {
        实现监听this.$refs.Myswper.swiper.activeIndex发生变化执行赋值动作
}

由于vue不能监听到swiper中的activeIndex，也不能监听到ref的变动，请问如何才能实现想要的效果？

Answer 1

在页面渲染出来的时候声明一个函数去调用这个 在vue里面定义一个object对象 通过这个函数将swiper赋值给这个object对象

然后在别的函数里面通过this.对象名.activeIndex就可以拿到了

watch事件监听swiper的acticeIndex

然后在函数里面就可以拿到vue对象内置的swiper对象的activeIndex了