关于swiper的最后一个slide是视频时， 切换控制视频播放的问题

<template>
  <swiper :options="swiperOptions" @slideChange="slideChange" ref="mySwiper">
    <swiper-slide v-for="(item, index) in data" :key="item.id">
      <template v-if="item.type === 'video'">
        <video-player :src="data.src" :poster="data.poster" :autoplay="false" :ref="`video${index}`" />
      </template>
      <template v-else>
        <img :src="item.src" alt="" />
      </template>
    </swiper-slide>
  </swiper>
</template>

<script>
export default {
  name: 'swiper',
  data() {
    return {
      activeIndex: 0,
      swiperOptions: {
        autoHeight: true, //enable auto height
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        loop: true,
        noSwiping: true,
        noSwipingClass: 'swiper-no-swiping',
      },
    }
  },
  methods: {
    slideChange() {
      const { realIndex } = this.swiper

      // 当前是视频的话，关闭视频
      const thisVideo = this.$refs[`video${this.activeIndex}`]
      // 下一个是视频的话，播放视频
      const nextVideo = this.$refs[`video${realIndex}`]

      if (thisVideo && thisVideo[0]) thisVideo[0].pause()
      if (nextVideo && nextVideo[0]) nextVideo[0].play()

      this.activeIndex = realIndex
    },
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
  },
}
</script>