vue中使用swiper设置loop循环播放时点击失效解决方案

问题

但是我们在给loop：true时轮播中的页面写点击事件，由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决方法

我们可以不使用vue中的@：click进行操作，而是在swiper的回调函数中直接操作DOM，这样就可以很好的解决这一问题，实例如下：

<swiper v-if="project.story" :options="storyOption" ref="mySwiper" class="storyWrap">
   <swiper-slide class="storyBox" v-for="(item, index) in project.story" :key="index">
       <div class="box">
          <img :src="item.img" alt>
          <div class="box_title">{{item.info}}</div>
       </div>
   </swiper-slide>
</swiper>

<script>
export default {
  data() {
    //这里解决this指向问题
    let _this = this;
    return {
      storyOption: {
        slidesPerView: 1.18,
        centeredSlides: true,
        loop: true,
        initialSlide: 1,
        spaceBetween: 15,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        on: {
          click: function() {
            //这里this指向轮播,所以我们声明了_this
            const realIndex = this.realIndex;
            //我们可以获取到点击的轮播的index
            let item = _this.project.benefit[realIndex];
          }
        }
      }
    }
}

loop虽然复制了页面,但是index值是不变的,通过这个方法可以给loop模式添加点击事件