VUE Swiper设置loop模式，第二轮首图click失效

工作中遇到，记录一下。

Vue项目中使用了swiper插件放轮播图。

每张图片链接到一个外部网站。

测试同学测到每次第二轮轮播时，第一张图片的click事件无效，

点击后无法跳转到外部链接。

查了一圈，没看到完整的解决方案。

好像是swiper插件的bug。

自己试出来的解决思路是：

1. 将需要跳转的url值加在slider的id属性上；
2. 用swiper对象自带的on监听去触发点击事件；
3. 点击事件里获取对象url进行跳转；

具体实现如下：

1.给图片div增加id属性，值为需要跳转的url。设置value属性不可用。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div
            v-for="(item, k) in banners"
            class="swiper-slide"
            :id="item.URL"
        >
            <img :src="item. IMAGE" />
        </div>
    </div>
</div>

2.不要在slide的div中设置vue的click事件，而是在new swiper对象时设置点击事件的监听。

setBanner() {
// swiper对象的事件监听this指向swiper，调用vue中其他方法需要用箭头函数或者把this赋值到变量上
    var that = this
    his.$nextTick(() => {
        const swiper = new Swiper('.swiper-container', {
            loop: true, 
            keyboardControl: false,
            autoplay: {
              disableOnInteraction: false,
              delay: 3000,
            },
            on:{
              click:function(sw){
                that.toNewPage(sw.target.id)
              }
            }
          })
      })
    },

3.跳转

toNewPage(url) {
    window.open(url, '_blank')
},

以上。