vue——使用轮播组件swiper，设置 loop为true后，点击事件失效及轮播索引错乱问题

<div id="swiper-goods" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swiperList" @click="toDetail(item)">
               ·····
        </div>
    </div>
</div>         

<div id="swiper-goods" class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in swiperList" :data-item="func_str(item)">
               ·····
        </div>
    </div>
</div>   

initSwiper_goods: function() {
    let _this = this;
    var mySwiper = new Swiper("#swiper-goods", {
          autoplay: 3000,
          loop: true,
          autoplayDisableOnInteraction: false,
          preventLinksPropagation: false,
          lazyLoading: true,
          pagination: ‘.swiper-pagination‘,
          observer: true, //修改swiper自己或子元素时，自动初始化swiper
          observeParents: true, //修改swiper的父元素时，自动初始化swiper
          onClick: function(swiper) {
            let item = JSON.parse(swiper.clickedSlide.attributes["data-item"].nodeValue);//转换为对象
            _this.toDetail(item);
          },
          onSlideChangeEnd: function(swiper) { //切换结束时，获取slide序号
            _this.swiperIndex = swiper.realIndex+1; //realIndex: 当前活动块的索引，与activeIndex不同的是，在loop模式下不会将复制的块的数量计算在内。
          }
     })
},

func_str: function(item) {   //将当前的item对象转换为字符串
        return JSON.stringify(item);
},

toDetail: function(item) {
     ···
}