vue中用swiper轮播框架Loop：true时点击事件失效的解决方法

我们在写页面的时候如果用到轮播图的情况一般会使用swiper来解决，因为swiper可以很好的兼容pc端和移动端。

问题

但是我们在给loop：true时轮播中的页面写点击事件，因为swiper的无限轮播时会自动复制第一个和最后一个页面进行轮播。但由于只复制页面没有复制点击事件，此时我们用vue写的点击事件在页面循环一周回来遇到复制的页面时，点击事件就会失效。

解决方法

对于这一问题到目前为止，我只找到一种解决方法，就是不使用vue中的@：click进行操作，而是在swiper的回调函数中直接操作DOM，这样就可以很好的解决这一问题，实例如下：

<template>
       <div class="autoPlay">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in list" :key="index">
                        <div class="border">
                            <div class="title">
                                <img :src="item.imgurl" alt="">
                                <p>{{item.title}}</p>
                            </div>
                            <div class="content" :item-id="index">{{item.meassge}}</div>
                            <div class="readMore" data-class="readMore"  :data-type="item.title" :data-index="index" >Read more ></div>
                            <div class="up" data-class="up"  :data-type="item.title" :data-index="index" >Roll up</div>
                        </div> 
                    </div>
                </div>
                <div class="swiper-button-prev"></div><!--左箭头-->
                <div class="swiper-button-next"></div><!--右箭头-->
            </div>
      </div>
  
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
export default {
  data:function(){
      return{
        
      }
  },
  mounted(){
    let that = this
    new Swiper ('.swiper-container', {
        loop: true,
        spaceBetween : 60,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        onClick: function (swiper, event) {
            let dataset =event.target.dataset
            if(dataset.class == 'readMore'){
                that.show(dataset.type,dataset.index)//点击read more时页面展开
            }else if(dataset.class == 'up'){
                that.close(dataset.type,dataset.index)//点击up 页面收缩
            }else{
                return//点击页面其他部分不进行任何操作直接返回
            }
        }
    }) 
  },
  methods:{
      show:function(message,index){
        // this.list[index].ok = !this.list[index].ok//这也是错误行为，只要是用vue操作不是操作DOM都会出错
           let contents = document.getElementsByClassName('content')//获取要展开的内容
           let mores = document.getElementsByClassName('readMore')//获取more按钮
           let ups = document.getElementsByClassName('up')获取up按钮
            for(let i = 0; i < contents.length; i++){
                let itemId = contents[i].getAttribute('item-id')//获取要展开内容的id
                if (itemId == index) {如果页面的ID和索引相同证明是同一页
                    mores[i].style.display="none"//more按钮隐藏
                    ups[i].style.display="block"//up按钮显示出来
                    contents[i].className = contents[i].className + ' hg'//页面展开
                }
            }
       },
       close:function(message,index){
        let mores = document.getElementsByClassName('readMore')
        let ups = document.getElementsByClassName('up')
        let contents = document.getElementsByClassName('content')
            for(let i = 0; i < contents.length; i++){
                let itemId = contents[i].getAttribute('item-id')
                if (itemId == index) {
                    mores[i].style.display="block"
                    ups[i].style.display="none"
                    contents[i].className = 'content'
                }
            }
       }
  },
}
</script>

因为我这个页面是用vue的v-for循环出来的，所以要判断itemId == index来仅对当前页面操作，如果每个swiper-slide中的点击事件是一样的，比如相同的弹框，则不需要判断只需要进行操作就行，因为操作相同元素不存在页面相互影响。总之试情况而定吧