解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper“: “^3.1.0）

解决vue-awesome-swiper点击事件失效的问题 ===“版本号（vue-awesome-swiper”: "^3.1.0）

最新做项目使用了 vue-awesome-swiper（3.1.0版本）轮播插件遇到的坑。
在使用loop: true模式下： 动态循环数据 ，轮播第一遍是点击事件是正常的，轮播第二遍的时候点击事件就失效了 点击事件不起作用 通过查看api , loop模式下会在slides前后复制若干个 slide 但是这个复制只是针对 dom 元素不会带上之前的绑定事件的 , 所以不能在dom上 直接绑定事件 绑定则无效,
页面样式swiper的标签
swiper里面的内容是这样的

  
            
              

                

                  

                    这是第{{item.num}}个人
                  
                
                

                      {{ item.flag === 0 ? "立即邀请" : "邀请更多" }}
                
              
            
          

在项目运行的时候就会发现，点击立即邀请 @click="handleInvite"这个事件在第一次轮播是正常的，当轮播完毕之后你就会发现，排在第一个位置的轮播图中点击事件会失效，根本不会触发。
轮播参数设置

SWIPER_OPTIONS() {
      return {
        slidesPerView: 'auto',
        spaceBetween: 5,
        loop: true,
        direction: 'vertical',
        observer: true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,//修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 2000,
        },
        on: {
          click: function () {
            vm.handleInvite()
          }
      	  }
      }

这种情况下，整个swiper-slide区域会会触发点击事件

如果要求在在swiper-slide某一个区域有点击事件

SWIPER_OPTIONS() {
      let _this = this;
      return {
        slidesPerView: 'auto',
        spaceBetween: 5,
        loop: true,
        direction: 'vertical',
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        autoplay: {
          delay: 2000
        },
        on: {
          click: function(e) {
            _this.slideClick(e, this.realIndex);
          }
        }
      };
    }

然后再methods中增加一个方法，点击区域通过通过e.taeget找到那个元素的，进行事件绑定

//轮播中莫某一区域滑动
    slideClick(e, index) {
      console.log(e.target.innerText);
      if (e.target.innerText == '邀请更多' || e.target.innerText == '立即邀请') this.handleInvite();
    },