vue中点击 swiper获取不到索引踩坑记录

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

  <swiper v-if="mainAchievementList.length" ref="mySwiper" :options="swiperOption">
        <swiper-slide v-for="(item,index) in mainAchievementList" :key="index">
          <img :src="item.image" alt="" style="width:332px;height:120px;cursor: pointer;" :data-   index="index" />
        </swiper-slide>
  </swiper>

data() {
    const _this = this
    return{
      swiperOption: {
        loop: true,
        slidesPerView: 4,
        loopedSlides: 4,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        on: {
          click: (v) => {
            console.log(_this.mainAchievementList)
            const index = v.target.getAttribute('data-index')
            _this.$router.push({
              path: '/news',
              query: {
                item: JSON.stringify(_this.mainAchievementList[index]),
                isSubject: true
              }
            })
          }
        },

        // 显示分页
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 允许分页点击跳转
        }

      }
    }
 }