vue 动态修改 swiper 属性失效

Question

export default {
  data() {
    return {
      mySwiper
    };
  },
  mounted() {
    this.mySwiper = new Swiper(".swiper-container-slide", {
      noSwipingClass: "stop-swiping",
      pagination: {
        el: ".swiper-pagination",
        clickable: false,
        renderBullet: function(index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        }
      },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next"
      },
      on: {
        reachEnd: () => {
          this.mySwiper.params.pagination.clickable = true; // 对 clickable 属性进行了修改，但失效
          console.log("到了最后一个slide");
        }
      }
    });
  }
};

我的预期效果是默认分页器无法点击，但当滚动到最后一页的时候，分页器方开启点击，经过如下尝试均以失败告终：

• 尝试通过官方api this.mySwiper.params.pagination.clickable 方法，失效；
• 尝试通过直接修改 data 方法，失效；
• 尝试通过 watch 监视修改方法，失效；

---

还望指点，谢谢！

Answer 1

按照官网的案例，设置后需要重新初始化

//如果你在swiper初始化后才决定使用clickable，可以这样设置 
mySwiper.params.pagination.clickable = true ; 
//此外还需要重新初始化pagination 
mySwiper.pagination.destroy()
mySwiper.pagination.init()
mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');