vue中使用swiper設置loop循環播放時點擊失效解決方案

問題

但是我們在給loop：true時輪播中的頁面寫點擊事件，由於只複製頁面沒有複製點擊事件，此時我們用vue寫的點擊事件在頁面循環一週回來遇到複製的頁面時，點擊事件就會失效。

解決方法

我們可以不使用vue中的@：click進行操作，而是在swiper的回調函數中直接操作DOM，這樣就可以很好的解決這一問題，實例如下：

<swiper v-if="project.story" :options="storyOption" ref="mySwiper" class="storyWrap">
   <swiper-slide class="storyBox" v-for="(item, index) in project.story" :key="index">
       <div class="box">
          <img :src="item.img" alt>
          <div class="box_title">{{item.info}}</div>
       </div>
   </swiper-slide>
</swiper>

<script>
export default {
  data() {
    //這裏解決this指向問題
    let _this = this;
    return {
      storyOption: {
        slidesPerView: 1.18,
        centeredSlides: true,
        loop: true,
        initialSlide: 1,
        spaceBetween: 15,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        },
        on: {
          click: function() {
            //這裏this指向輪播,所以我們聲明瞭_this
            const realIndex = this.realIndex;
            //我們可以獲取到點擊的輪播的index
            let item = _this.project.benefit[realIndex];
          }
        }
      }
    }
}

loop雖然複製了頁面,但是index值是不變的,通過這個方法可以給loop模式添加點擊事件