原因：因为把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自己或子元素时，自动初始化swiperobserveParents: true, //修改swiper的父元素时，自动初始化swiper// 如果需要前进后退按钮navigation: {nextEl: '.el-icon-right',prevEl: '.el-icon-back',},on: {slideChangeTransitionEnd: function () {//页面显示当前第几个_this.swiperSlideIndex = this.activeIndex + 1;},}})})}},

效果图如下：

---

end~~~

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