swiper vue修改数据，swiper不更新的问题

最新推荐文章于 2025-06-20 10:11:36 发布

原创最新推荐文章于 2025-06-20 10:11:36 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #swiper

vue 专栏收录该内容

32 篇文章

订阅专栏

文章讲述了在使用Swiper时遇到的问题，即初次初始化正常但数据源变化后无法正确显示或翻页。作者分享了解决方案，即启用`observer`和`observeParents`监听配置以适应数据变化并自动刷新Swiper。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

swiper第一次初始化的时候正常，但是当我改变源数据时，要么就是不能把数据显示完，要么就是没有翻页。尝试过重新赋值swiper，但是依旧没有解决，后面找到下面的方案，测试能够解决我的问题。
解决方案，增加监听的配置。


  initSwiper() {
		// 这是我的源数据
      const length = this.liveListProp ? this.liveListProp.length : 0
      
    const group =  length % this.slidesPerViewProp == 0
            ? length / this.slidesPerViewProp
            : length / this.slidesPerViewProp + 1
            console.log("group ",group);
      this.swiper = new Swiper(this.$refs.discoverLiveListRef, {
        slidesPerView: this.slidesPerViewProp,
        spaceBetween: 15,
        slidesPerGroup:group,
        loop: false,
        loopFillGroupWithBlank: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
	
		// 这2段代码起作用
        observer:true,  //修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,  //修改swiper的父元素时，自动初始化swiper
      });
    },