swiper插件 点击事件 的坑

需求：我需要做的东西是，下面轮播6个视频，点击视频，上面大视频播放对应的内容

遇到的坑：当时是只并排显示3个，6个视频循环第一遍的时候点击事件都正常，但是第二遍的1,2,3点击事件失效，4,5,6正常

 

尝试了很多版本的swiper（3版本，4版本，vue-awesome-swiper：3.1.1）都有这种现象

有两个解决方案：

一：关掉swiper的环路属性（loop:false）,这样一直都是正常的

二：点击事件，用原生js写

 

/**
         * 给视频添加点击事件
         */

        addEventClickToVideo(){
            const newSwiper = document.getElementById("swiper")
            const item = newSwiper.getElementsByClassName('swiper-video')
            item.forEach((element,index) => {
                element.onclick = ($event)=>{
                    console.log($event)
                    console.log($event.currentTarget.dataset.url);         //  $event.currentTarget 获取到的是上一层的元素      $event.arget 获取到的是本层的元素
                    const _url = $event.currentTarget.dataset.url     // 知识点：此处获取的 url 是 html5中自定义属性data-*,比如此处的url, 是从该元素属性 date-url='' 获取的
                    const _cover = $event.currentTarget.dataset.cover 
                    this.handleSwiperVideo(_url,_cover) 
                    $event.preventDefault() 
                    $event.stopPropagation(); 
               } 
            }); 
         }

 new Swiper('.swiper-container', {
                    autoplay:true,
                    loop:true,
                    slidesPerView:3,
                    on:{
                        init:function(swiper){
                            _self.addEventClickToVideo()        //  在swiper回调中调用点击事件
                        }
                    },
                    // 左右按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                
                })