Nuxt中Swiper Vue组件事件处理器无法正常工作问题

问题核心 #

你遇到的报错根源是：setup函数内定义的onSwiper方法未向外暴露，导致模板无法找到该事件处理函数；同时模板中绑定的slideTo方法也未实现，后续点击按钮也会触发报错。

修复步骤 #

1. 暴露事件处理方法：在setup中必须返回onSwiper，才能让模板的@swiper事件绑定生效
2. 保存实例并实现滑动方法：将Swiper实例存储起来，实现slideTo方法调用实例的滑动API
3. 清理冗余代码：移除未使用的useSwiper导入，优化代码结构

修复后的完整组件代码 #

<template>
    <h1>Slider</h1>
    <div class="container">
        <swiper @swiper="onSwiper" :navigation="true" :slides-per-view="3" :space-between="89" :loop="true"
            :loopFillGroupWithBlank="true">
            <swiper-slide v-for="image in images" :key="image">
                <card :image="image" />
            </swiper-slide>
        </swiper>
        <button @click="slideTo(4)" class="bg-primary btn-primary"> Next Slide</button>
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import SwiperCore, { Navigation } from 'swiper';
import 'swiper/css';
import "swiper/css/navigation";

SwiperCore.use([Navigation]);

export default {
    name: "Slider",
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        let swiperInstance = null;
        
        const onSwiper = (swiper) => {
            swiperInstance = swiper;
            console.log(swiper); // 现在可正常打印Swiper实例
        };

        const slideTo = (index) => {
            swiperInstance?.slideTo(index); // 可选链避免实例未初始化时报错
        };

        // 返回模板需要访问的方法
        return {
            onSwiper,
            slideTo
        };
    },
    data() {
        return {
            images: [
                "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
                "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
                "https://cdn.pixabay.com/photo/2022/02/09/03/48/oriental-garden-lizard-7002565_960_720.jpg",
                "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg",
                "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg"
            ]
        };
    }
};
</script>

额外说明 #

你的package.json和nuxt.config.js配置无问题，当前Swiper v8.4.5与Nuxt 3.0.0版本兼容正常。

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