vue-awesome-swiper点击事件失效问题

最近做项目遇到了vue-awesome-swiper在loop模式下点击失效问题，经过多番尝试，找到了比较好的解决方式，记录下来，希望能帮助更多的朋友越过这些坑，话不多说，上干货；

1.出现点击失效的原因：在loop模式下，超出实际数量的轮播项实际上是被复制出来的，是swiper虚拟slide进行填充，对这些虚拟slide元素进行操作无效。

2.明白了原因，那我们去解决，点击的方法不在元素上绑定，而是在options上，例如：

swiperOption = {

    loop: true,

    onlyExternal: true,

      on: {

                click: v => {

                  const id = v.target.getAttribute('data-id') // 获取绑定的自定义属性值id

                    condole.log(id)

                }

          },

}

PS：

1.可以看到，我使用的自定义属性的办法将需要的数据存到自定义属性上，这是最直接有效的方式,但切记这里的this指向的是swiper实例，要赋值的时候注意

2.因为点击事件获取到的是实际点击的元素，建议 slide内的所有元素都加上自定义属性，以便不管任何 slide的点击位置都能获取得到绑定的数据， 这点很重要！！！ 这点很重要！！！ 这点很重要！！！