vue引用vue-awesome-swiper使用loop:true时点击事件失效问题处理

Swiper的API文档：API链接
个人使用的swiper版本为3.1.1，个人建议使用3.1.1，使用人数最多，避免踩更多的坑

处理方式一

利用swiper中v-for内的控件，将数据以属性的形式保存的内部dom上，再利用swiper的点击事件得到当前的dom，通过dom的.target.getAttribute找到当前dom想要传递的数据。

<div class="lunbo ">
        <!-- 切换上一张轮播图按钮 ************** start ******************** -->
        <div
          class="swiper-prev pre"
          style="width:3%;float:left;margin-right:2%;"
        >
          <img src="@/assets/images/pre.png" alt="" />
        </div>
        <!-- 切换上一张轮播图按钮 ************** end ******************** -->
        <!-- 轮播图 ************** start ******************** -->
        <div class="lunbo monthSwiper"
          style="width:90%;margin: 0 auto;float:left;position:relative">
          <swiper ref="mySwiper" :options="swiperOption" v-if="tupianList.length">
            <swiper-slide
              v-for="(item, index) in tupianList"
              :key="index"
              :pageLength="tupianList.length"
              :index="index"
              ><img
                :src="item.pictureUrl"
                alt=""
                style="width:95%;height:10.98vw;display:block;cursor: pointer;"
                :data-id="item.id"
                :data-type="4"
                :data-itemType="item.type"
              />
            </swiper-slide>
          </swiper>
        </div>
        <!-- 轮播图 ************** end ******************** -->
        <!-- 切换下一张轮播图按钮 ************** start ******************** -->
        <div class="swiper-next pre"
          style="width:3%;float:left;margin-left:2%;">
          <img src="@/assets/images/next.png" alt="" />
        </div>
        <!-- 切换下一张轮播图按钮 ************** end ******************** -->
      </div>

<script>
// 版本不同，引用写法不同，swiper，swiperSlide的首字母大小写也会影响
import { swiper, swiperSlide } from 'vue-awesome-swiper';
// css引用不同，或者'swiper/dist/css/swiper.css';
import 'swiper/swiper-bundle.css' 
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      tupianList: [],
      swiperOption: {
        navigation: {
          nextEl: '.swiper-next',
          prevEl: '.swiper-prev',
        },
        sleep:100,
        loop: true,
        loopedSlides:4,
        loopPreventsSlide:true,
        autoplay: true,
        slidesPerView:4,
        preventLinksPropagation: false,
        on: {
          click: (v) => {
            console.log(v)
            let id = v.target.getAttribute('data-id')
            let type = v.target.getAttribute('data-type')
            let itemtype = v.target.getAttribute('data-itemType')
            console.log(id,type,itemtype)
            if (itemtype != '无跳转') {
              this.$router.push({
                path: '/xiangqing'
              })
            }
          }
        }
      }
      
    }
  }
}
</script>

处理方式二

利用vue的data保存swiper的数据，再利用swiper的点击事件得到下标，找到指定下标的swiper数据。
详细内容参考：引文链接一 ， 引文链接二