VUE-AWESOME-SWIPER loop true时候点击无效解决方案

1. 解决：数据预警 swiper轮播点击失效

2. 参考：https://www.cnblogs.com/xinci/p/11194990.html

3. 核心：点击事件绑定在swiper里面，而不是在vue template div上面。因为swiper在looptrue的时候会多复制2个假的，点击会无效。

通过在swiper上绑点击，通过let index = vm.clickedIndex - vm.activeIndex + vm.realIndex;拿到真的index，将复制的2个index处理

4. 代码：

swiperOption: {
        slidesPerView: 5,
        speed: 3000,
        loop: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        clicks: {
          preventClicksPropagation: false,
        },
        direction: "vertical",
        autoplay: {
          autoplay: true,
          delay: 1000,
          disableOnInteraction: false,
        },
        on: {
          click: function () {
            // 这里有坑，需要注意的是：this 指向的是 swpier 实例，而不是当前的 vue， 因此借助 vm，来调用 methods 里的方法
            console.log(this);
            // console.log(this.$children[0].data.id); // click改为箭头函数可以this就变成vue可以通过vue获取id
            // let id = this.$children[0].data.id;
            vm.handleClickSlide(this);
            // vm.showDetail(id);
          },
        },
      },


 handleClickSlide(vm) {
      // 注意这样拿到的是真的list里面的index, 但looptrue的时候，会多复制2个index,需要手动变下，才可以实现和list的index完全对应
      // 在swiper里注册点击事件，loop true复制的2个假的才可以被点击上，所以点击事件不写在vuetemplate的div上面
      // 关键词： swiper loop true点击失效
      let index = vm.clickedIndex - vm.activeIndex + vm.realIndex;
      if (index === this.list.length) {
        index = 0;
      } else if (index === this.list.length +1) {
        index = 1;
      } else if (index === this.list.length +2) {
        index = 2;
      }
      // 我得到的index就是点击的item在实际数组中的下标index
      console.log(index);
      // console.log(this.list[index].id);
      // 后面可以根据得到的index判断跳到每个对应的路由this.$router.push({path: `/single`});
      this.showDetail(this.list[index].id);
    },