swiper不生效/切换不生效，点击切换按钮activeIndex值不对应问题@令狐张豪

原因：因为把new Swiper放在mounted实例化的时候可能v-for并未执行完成结构还未完全生成

• 错误：先执行了swiper实例化后循环的；
• 正确：先循环完数据确保数据完整循环完成后再执行swiper实例化；

解决方案：watch+$nextTick

   data () {
      return {
         payParams: [],  //swiper要循环的数据
         swiperSlideIndex: 1, //课件播放页当前第几个
      }
   },
 watch: {
      payParams (newValue, oldValue) {
         let _this = this;
         this.$nextTick(() => {
            this.mySwiper = new Swiper('.swiper-container', {
               direction: 'horizontal', // 垂直切换选项
               autoplay: false,
               loop: false, // 循环模式选项
               observer: true, //修改swiper自己或子元素时，自动初始化swiper
               observeParents: true, //修改swiper的父元素时，自动初始化swiper
               // 如果需要前进后退按钮
               navigation: {
                  nextEl: '.el-icon-right',
                  prevEl: '.el-icon-back',
               },
               on: {
                  slideChangeTransitionEnd: function () {
                     //页面显示当前第几个
                     _this.swiperSlideIndex = this.activeIndex + 1;
                  },
               }
            })
         })
      }
   },

效果图如下：

---

end~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！
文章对您有所帮助请给作者点个赞支持下，谢谢~