Vue swiper组件点击事件偶尔不响应的问题

  项目需要，轮播图引入了vue-awesome-swiper这个组件，加入click事件，在获取数组元素进行跳转时候，遇到了奇怪的问题：
有时候第一个或者最后一个元素在点击时候，点击事件失效了，没打印出任何信息，但点击其他位置时候没有问题
问题代码如下：

<swiper :options="swiperOption" ref="mySwiper" id="loopsCom">
  <swiper-slide class="cls-item" v-for="(item, index) in showLoopValues" :key="index">
    <div @click="clkItem(index)">
      {{index}}
    </div>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

clkItem(index) {
  console.warn('==>>click loop item index = ' + index);
  console.warn('==>>click loop item title = ' + this.showLoopValues[index]['id']);
}

  很奇怪，就只是某些左右滑动后，第一个或者最后一个无法响应点击事件，不知道是否是因为为了加载效果，就预先复制其他页面的效果导致的。

后面经过询问朋友及查看swiper的官网API，发现我们可以用如下这个api来响应点击事件。
解决问题的代码

<swiper :options="swiperOption" ref="mySwiper" id="loopsCom" @click-slide="clkItem">
  <swiper-slide class="cls-item" v-for="(item, index) in showLoopValues" :key="index">
    <div>
      {{index}}
    </div>
  </swiper-slide>
  <div class="swiper-pagination" slot="pagination"></div>
</swiper>

clkItem(index, realIndex) {
  console.warn('==>>click loop item index = ' + index + '; realIndex = ' + realIndex);
  console.warn('==>>click loop item title = ' + this.showLoopValues[realIndex]['id']);
}

如下图打印输出：

ShowerLoopsLargeCom.vue?0ebc:97 ==>>click loop item index = 1; realIndex = 0
ShowerLoopsLargeCom.vue?0ebc:98 ==>>click loop item title = tech_al_txh
ShowerLoopsLargeCom.vue?0ebc:97 ==>>click loop item index = 2; realIndex = 1
ShowerLoopsLargeCom.vue?0ebc:98 ==>>click loop item title = tech_al_lol

  用了@click-slide这个后，可以取到对应swiper真正的realIndex，但是比较奇怪的是对应的index，竟然是加1的，虽然奇怪，但是各种情况下轮播图点击没有问题了，用realIndex即可，时间关系先解决问题，暂不深究。

原创文章，欢迎转载，转载请注明：ifish.site

作者：JaydenZhou