使用keen-slider时v-for循环失效，幻灯片展示异常求助

问题核心是Keen Slider在数据加载完成前就完成了初始化，导致后续通过v-for渲染的幻灯片无法被Slider识别，全部挤在同一张里。以下是两种可行的修复方案：

方案一：延迟初始化Slider，直到数据加载完成 #

修改<script setup>部分，把Slider的初始化逻辑移到数据加载完成之后：

<script setup>
import { useKeenSlider } from 'keen-slider/vue';
import { onMounted, ref } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';

import ItemCard from '@/component/ItemCard.vue';

const storeRecipe = useStoreRecipe();
const container = ref(null); // 先声明ref，后续再初始化Slider

onMounted(async () => {
    await storeRecipe.loadRecipes();
    // 数据加载完成后再初始化Slider
    useKeenSlider(container, {
        loop: true,
        spacing: 40,
        slidesPerView: 3,
    });
});
</script>

<template>
    <div class="keen-slider" ref="container">
        <div
            class="keen-slider__slide"
            v-for="recipe in storeRecipe.data"
            :key="recipe.id">
            <ItemCard :data="recipe" :pending="storeRecipe.pending" />
        </div>
    </div>
</template>

<style lang="scss">
@import url('keen-slider/keen-slider.css');
</style>

方案二：监听数据变化，动态更新Slider #

如果需要支持数据动态更新（比如后续新增/删除食谱），可以通过监听storeRecipe.data的变化，调用Slider的update方法：

<script setup>
import { useKeenSlider } from 'keen-slider/vue';
import { onMounted, watch } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';

import ItemCard from '@/component/ItemCard.vue';

const storeRecipe = useStoreRecipe();
const [container, instance] = useKeenSlider({
    loop: true,
    spacing: 40,
    slidesPerView: 3,
});

onMounted(async () => {
    await storeRecipe.loadRecipes();
});

// 监听数据变化，更新Slider
watch(() => storeRecipe.data, () => {
    instance.value?.update();
}, { deep: true });
</script>

额外检查项 #

• 确保ItemCard组件没有设置超出容器宽度的样式，比如固定宽高导致幻灯片无法自适应；
• 确认keen-slider__slide类的样式没有被自定义样式覆盖，保证每个slide的布局正确。

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