Laravel+Vue3组合式API实现Swiper轮播失效问题求助

问题描述 #

使用Laravel API结合Vue3组合式API实现Swiper轮播功能，静态模板在main.js中配置的Swiper可正常运行，但接入接口数据后，Swiper仅显示第一条Actualité数据，API接口数据返回正常。

核心原因 #

1. 初始化时机错误：fetchActualites是异步函数，当前代码在调用接口后立刻初始化Swiper，此时接口数据尚未返回，Vue还未渲染出所有swiper-slide元素，Swiper只能检测到初始状态的元素（空或仅第一条），导致初始化不完整。
2. v-if过滤潜在影响：swiper-slide内部使用v-if="actualite.images.length > 0"过滤数据，若只有第一条数据满足条件，也会出现仅显示一条的情况，但根据API返回正常的描述，此为次要潜在因素。

解决方案 #

方案一：等待接口数据返回后初始化Swiper #

修改onMounted逻辑，等待异步接口请求完成后再初始化Swiper：

import { ref, onMounted } from 'vue';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
import useActualites from '../composition-api/useActualites';
import HeaderIndex from './HeaderIndex.vue';

export default {
  name: 'Index',
  components: {
    HeaderIndex
  },
  setup() {
    const { actualites, fetchActualites } = useActualites();

    onMounted(async () => {
      // 等待接口数据加载完成
      await fetchActualites();

      // 初始化Swiper
      new Swiper('.testimonials-slider', {
        speed: 600,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
      });
    });

    return { actualites, fetchActualites };
  }
}

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

如果数据存在后续更新场景（如分页、刷新），使用watch监听actualites变化，动态销毁并重新初始化Swiper：

import { ref, onMounted, watch } from 'vue';
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';
import useActualites from '../composition-api/useActualites';
import HeaderIndex from './HeaderIndex.vue';

export default {
  name: 'Index',
  components: {
    HeaderIndex
  },
  setup() {
    const { actualites, fetchActualites } = useActualites();
    let swiperInstance = null;

    // 初始化Swiper的通用函数
    const initSwiper = () => {
      swiperInstance = new Swiper('.testimonials-slider', {
        speed: 600,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        slidesPerView: 'auto',
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          clickable: true
        }
      });
    };

    onMounted(async () => {
      await fetchActualites();
      initSwiper();
    });

    // 监听数据变化，更新Swiper
    watch(actualites, () => {
      if (swiperInstance) swiperInstance.destroy();
      initSwiper();
    }, { deep: true });

    return { actualites, fetchActualites };
  }
}

方案三：使用Swiper官方Vue组件（推荐） #

直接使用Swiper官方适配Vue的组件，利用Vue响应式系统自动感知数据变化，无需手动操作DOM：

1. 安装依赖：

npm install swiper

2. 修改Index.vue代码：

<template>
  <!-- ...其他代码 -->
  <section id="testimonials" class="testimonials">
    <div class="container" data-aos="zoom-in">
      <div class="testimonials-slider" data-aos="fade-up" data-aos-delay="100">
        <swiper
          :speed="600"
          :loop="true"
          :autoplay="{ delay: 5000, disableOnInteraction: false }"
          :slides-per-view="'auto'"
          :pagination="{ el: '.swiper-pagination', type: 'bullets', clickable: true }"
        >
          <swiper-slide v-for="actualite in actualites" :key="actualite.id">
            <div class="testimonial-item" v-if="actualite.images.length > 0">
              <img :src="'/storage/' + actualite.images[0].url" 
                   :alt="actualite.images[0].caption" class="testimonial-img">
              <h3>{{ actualite.title }} Actualité de 05/04/2024</h3>
              <br>
              <p>
                <h2>
                  <i class="bx bxs-quote-alt-left quote-icon-left"></i>
                  {{ actualite.content }}
                  <i class="bx bxs-quote-alt-right quote-icon-right"></i>
                </h2>
                <h4>Lire plus</h4>
              </p>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </section>
</template>

<script>
import { ref, onMounted } from 'vue';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import useActualites from '../composition-api/useActualites';
import HeaderIndex from './HeaderIndex.vue';

export default {
  name: 'Index',
  components: {
    HeaderIndex,
    Swiper,
    SwiperSlide
  },
  setup() {
    const { actualites, fetchActualites } = useActualites();

    onMounted(async () => {
      await fetchActualites();
    });

    return { actualites, fetchActualites };
  }
}
</script>

额外注意事项 #

• 验证actualites数据结构，确保每个条目都包含id和images字段，且v-if过滤后存在多个符合条件的条目。
• 检查CSS样式，确保swiper-wrapper、swiper-slide的布局样式未被覆盖，避免因样式问题导致轮播显示异常。

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