vue中用swiper轮播框架loop：true时点击事件失效的

问题描述：swiper轮播是可以点击去查看详情的，swiper的loop属性是true，当我们点击第一张图片和向左滑动到最后一张点击时触发不了事件的

原因：因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

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

> html部分

<div class="swiper-wrapper">

<div class="swiper-slide" v-for="(item,index) in ielswiperList" :key="index" :data-index="index">

  <div class="item-img">

    <img

      :src="item.img"

      :alt="item.title"

    />

  </div>

  <div class="item-desc">

    <h4 class="item-desc-title">{{item.title}}</h4>

    <p class="item-desc-sec">{{item.desc}}</p>

  </div>

</div>

> js部分

var that = this;

this.swiper = new Swiper(".swiper-container", {

  slidesPerView: 3,

  spaceBetween: 55,

  centeredSlides: true,

  loop: true,

  on: {

    slideChangeTransitionStart: function() {

      if (this.activeIndex == 2) {

        that.currentIndex = 5;

      } else if (this.activeIndex == 9) {

        that.currentIndex = 0;

      } else {

        that.currentIndex = this.activeIndex - 3;

      }

},

click:function(){

let val = parseInt(this.clickedSlide.dataset.index) + 3

that.swiperChange(val)

}

  }

});