vue-cli 配置 Swiper 页面报错

日常问题笔记

已于 2023-03-27 20:53:06 修改

阅读量460

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-03-17 17:27:09 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42125025/article/details/129624803

在学习Vue时遇到swiper配置问题，报错TypeError。尝试卸载高版本，安装v4.1.1低版本解决问题。通过新建项目和局部导入方法成功使用swiper，避免了错误。在mounted钩子中，能正常访问swiper实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习vue进行到配置swiper，遭遇命令行各种报错

卸载swiper高版本，重装低版本后页面还是一片红报错
Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'value')"

最后直接vue项目删掉，新建vue项目，直接安装低版本，再重新打开页面就不报错了

解决流程记录：

https://github.com/surmon-china/vue-awesome-swiper/tree/v4.1.1

低版本安装执行命令：cnpm i swiper@5.3.1 vue-awesome-swiper@4.1.1 --save -D

安装成功后，使用swiper

Global Registration 全局导入

Local Registration 局部导入

我使用局部的

官方提供的模板代码

创建Swiper.vue放入截图中官方提供的代码

<template>
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>
  
<script>
   import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
   import 'swiper/css/swiper.css'

    export default {
        components: {
            Swiper,
            SwiperSlide
        },
        directives: {
            swiper: directive
        },
        data() {
            return {
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    // Some Swiper option/callback...
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        mounted() {
        console.log('Current Swiper instance object', this.swiper)
        this.swiper.slideTo(3, 1000, false)
        }
    }
</script>