使用vue-awesome-swiper组件 手动滚动点击失效问题

• 最近做了一个项目用了vue-awesome-swiper这个组件，遇到了一个问题。

就是vue引入swiper后，使用loop循环，然后给每个swiper-slide滑块绑定事件@click='fn()' ,由于是循环模式，swiper会复制两份swiper-slide滑块做循环的效果，但是这两份复制的滑块点击效果无效，其它的正常。

废话不多说 上代码

• 问题代码

  
  
  image.png

这是把点击事件绑定在dom上
在 loop 开启的时候，dom 绑定事件是有问题的。因为在loop模式下slides前后会复制若干个slide，从而形成一个环路，但是却不会复制绑定在dom上的click事件。
因此只能使用 swiper 提供的 api 方法进行解决

解决方案

• html

  
  
  image.png
• js