Vue js Swiper Element - 更新幻灯片数量时出现故障

Question

我目前正在开发一个项目，需要使用滑动器来显示相当大量的幻灯片（150+）。我选择了这个工具：https://swiperjs.com/element

该界面可在桌面和移动设备上使用。移动设备上的幻灯片太多，使用起来很快就会变得复杂，因此我添加了过滤屏幕上显示的幻灯片的功能，以下是一个 jsfiddle 的示例：jsFiddle

我已经根据屏幕尺寸更改了屏幕上显示的幻灯片数量，到目前为止一切似乎都正常。

问题是这样的，有点随机但不可避免，一旦我用上面的按钮过滤列表或更改窗口大小，或两者兼而有之，滑块就不再正常工作，要么滚动条相对于数字延伸得太远显示的幻灯片数量，或者某些幻灯片在尝试容纳某些内容时占用了过多的宽度。有时，即使屏幕外有幻灯片，滚动条也会消失。

（我让你操纵js小提琴重现）

<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>

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))
            
                        //what's bellow didn't work
            //const swiperEl = document.querySelector('swiper-container');
            //if (swiperEl != null) {                
            //    swiperEl.swiper.update();
            //}
            return result;
        }
    },
});

我尝试了很多方法来纠正该问题，包括尝试使用我在滑块 js 文档 (https://swiperjs.com/swiper-api) 中找到的方法强制滑块更新，甚至删除几个滑块功能得到一些非常基本的东西，但没有任何改变（例如，我删除了网格选项，这使得一切比现在更糟糕）。

供您参考，我初始化滑块上的断点和其他属性的方式是对我有用的唯一方法，我看到还有其他方法可以做事，但它们不起作用。我不知道这是否需要注意，因为我认为问题来自于使用计算值生成幻灯片，但我还没有弄清楚如何克服这个问题。

这就是为什么我请求你的帮助，也许可以找出问题所在。

不幸的是，我不记得我尝试过的所有内容，但请毫不犹豫地问我是否尝试过这个或那个解决方案，我会告诉你是否尝试过，如果没有，我会尝试建议。

Answer 1

我终于找到了解决问题的方法。我修改了 DOM，如下：

<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, index) in filteredListCharacters">
  
    <v-card :slot="'slide-' + index" 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>     
</template>  
</swiper-container>

我删除了并将其替换为 slot="slide-{index}" 并且它起作用了！这是工作中的 jsFiddle ：https://jsfiddle.net/Glow_Jr/0m4j51fL/52/