vue使用swiper绑定点击方法问题

最近在做swiper轮播图的时候遇到了一个问题，记录一下

问题描述：loop:true的情况下轮播图左滑，最后一张轮播图点击事件无法触发

问题分析：节点被复制，绑定时间不能被复制

错误示例：

        <swiper ref="mySwiper" :options="swiperOption" class='swiper_container'>
            <swiper-slide v-for(index,item) in datalist :key='index'>
                <img :src="item.imgUrl" alt @click='goDetail(index.item)'/>  // 当loop：true时，这种绑定点击事件会有问题
            </swiper-slide>
        <swiper>

解决方法：

       html部分： 

              <swiper ref="mySwiper" :options="swiperOption" class='swiper_container'>
                 <swiper-slide v-for(index,item) in datalist :key='index' ：data-href='fun_str(item)'>  // data-href用来获取item数据
                     <img :src="item.imgUrl" alt/>
                 </swiper-slide>
             <swiper>

      js部分：

           data(){

               return{

                   swiperOption:{

                        loop:true

                    }

               }

            }

          computed: {
              // 获取swiper实例
              swiper(){
                 return this.$refs.mySwiper.$swiper
              },
            },
           mounted:{
              let that = this
              this.swiper.on('click',function(){
              / / 这里的this是swiper的实例
              let item = JSON.parse(this.clickedSlide.attributes["data-href"].nodeValue)
              const clickedIndex = this.realIndex;
              // 这里的that是Vue的实例
               that.goDetail(clickedIndex,item);
            })
         },
         methods: {
             // 处理item数据返回给swiper实例
             func_str(item){
                 return JSON.stringify(item);
             },
            // 点击事件
            goDetail(index,item){
             // 跳转方法
            }
    }