Swiper Vue 组件事件处理程序在 Nuxt 中不起作用答案

【问题标题】：Swiper Vue component event handlers not working in NuxtSwiper Vue 组件事件处理程序在 Nuxt 中不起作用
【发布时间】：2022-12-06 21:25:28
【问题描述】：

我在用刷卡器.js在我的Nuxt项目。我正在使用 docs 提供的默认代码。我正在尝试记录 swiper 实例，但它不工作。在控制台中，它给了我以下错误

这是我的模板代码和onSwiper函数

<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,
    useSwiper
} 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() {
        const onSwiper = (swiper) => {
            console.log(swiper);
        };
    },
    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>

包.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "nuxt": "3.0.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "@nuxtjs/google-fonts": "^2.0.0",
    "@pinia/nuxt": "^0.4.6",
    "@tailwindcss/typography": "^0.5.8",
    "swiper": "^8.4.5"
  }
}

Nuxt配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  modules: ["@pinia/nuxt"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

【问题讨论】：

请共享整个 SFC 文件而不是其中的一部分，因为它看起来就是问题所在。另外，你能确认你使用的是 Nuxt3 吗？因为它是与 Swiper v8 兼容的 only version。
使用 package.json 和 nuxt 配置文件更新了问题。

标签： vue.js nuxt.js swiper.js

【解决方案1】：

您需要在最后 return 它，如他们的示例所示。

setup() {
  const onSwiper = (swiper) => {
    console.log(swiper);
  }

  return {
    onSwiper
  }
}

只有script setup 自动返回函数/变量。

【讨论】：