Vue中Swiper Element更新幻灯片数量时故障求助

项目背景 #

• 使用Swiper Element组件展示150+幻灯片，适配桌面与移动端
• 为解决移动端幻灯片过多操作复杂的问题，添加了幻灯片筛选功能

已实现功能 #

已完成根据屏幕尺寸自动调整单屏显示幻灯片数量的逻辑，该功能运行正常。

问题现象 #

当进行以下操作时，滑块必然出现随机异常：

• 点击上方筛选按钮切换幻灯片列表
• 调整浏览器窗口尺寸
• 同时进行上述两种操作

具体异常表现：

• 滚动条长度与实际显示的幻灯片数量不匹配
• 部分幻灯片宽度出现异常
• 明明有幻灯片处于屏幕外，但滚动条消失不见

故障截图：

代码示例 #

HTML 部分 #

<div id="demo">
  <div class="text-center">
    <v-btn-toggle v-model="selectedMedia"
                  mandatory active-class="selectedMedia" dense >
      <v-btn :value="null">
        <span>All</span>
      </v-btn>
      <v-btn v-for="media in listAllMedia" :value="media.code" :key="media.code">
        <span>{{media.label}}</span>
      </v-btn>
    </v-btn-toggle>
  </div>

  <swiper-container ref="swiper" :slides-per-view="isMobile ? 2 : 10"
                    :space-between="isMobile ? 5 : 10"
                    :centered-slides="false"
                    :scrollbar="true" 
                    :scrollbar-draggable="true" 
                    :scrollbar-drag-size="isMobile ? 50 : 100" 
                    :free-mode="true"
                    
                    breakpoints='{"100": {"slidesPerView": 2}, "480": {"slidesPerView": 3}, "650": {"slidesPerView": 4}, "850": {"slidesPerView": 5}, "950": {"slidesPerView": 6}, "1150": {"slidesPerView": 7}, "1300": {"slidesPerView": 8}, "1500": {"slidesPerView": 9}, "1700": {"slidesPerView": 10}}'>

    <template v-for="chara in filteredListCharacters">
      <swiper-slide>
        <v-card style="height: 300px; border: 1px solid black">

          <v-card-title style="color: black; padding-top: 10px;">{{chara.name}}
          </v-card-title>

          <v-card-text style="padding-top: 5px; padding-bottom: 5px;">
            <div v-for="media in chara.medias" style="font-style: italic; color: gray; font-size: 10px;">{{listAllMedia.filter(x => x.code == media)[0]?.label}}</div>
          </v-card-text>
        </v-card>
      </swiper-slide>
    </template>
  </swiper-container>
</div>

JavaScript 部分 #

var demoApp = new Vue({
    el: '#demo',    
    data: {
            selectedMedia: null,
            listAllMedia: [
                { code: "med1", label: "Media 1" },
              { code: "med2", label: "Media 2" },
                { code: "med3", label: "Media 3" },
              { code: "med4", label: "Media 4" },
              { code: "med5", label: "Media 5" },
              { code: "med6", label: "Media 6" },
              { code: "med7", label: "Media 7" },
              { code: "med8", label: "Media 8" },
        ],
        isMobile: false,
        characters: [
          { name: "A", medias:["med1", "med2", "med3"] },
          { name: "B", medias:["med2", "med4", "med8"] },
          { name: "C", medias:["med1", "med2", "med3"] },
          { name: "D", medias:["med1", "med8", "med6"] },
          { name: "E", medias:["med8", "med5", "med7"] },
                    { name: "F", medias:["med1", "med6", "med5"] },
          { name: "G", medias:["med7", "med4", "med3"] },
          { name: "H", medias:["med1", "med3", "med6"] },
          { name: "I", medias:["med5", "med6", "med8"] },
        ]
    },
    computed: {
        filteredListCharacters: function () {
            var self = this;
            var result = self.selectedMedia == null ? self.characters : self.characters.filter(x => x.medias?.includes(self.selectedMedia))
            
                        //以下代码无效
            //const swiperEl = document.querySelector('swiper-container');
            //if (swiperEl != null) {                
            //    swiperEl.swiper.update();
            //}
            return result;
        }
    },
});

已尝试的解决方法 #

• 调用Swiper API的update()方法强制更新滑块，无效果
• 简化滑块配置，移除部分功能，问题仍存在
• 怀疑问题根源是使用计算属性生成幻灯片列表，但暂未找到有效解决思路，恳请协助排查问题。

内容的提问来源于stack exchange，提问作者GlowJr