vue使用swiper插件时遇到的错误

最新推荐文章于 2023-11-10 11:08:57 发布

啦啾啾啾木

最新推荐文章于 2023-11-10 11:08:57 发布

阅读量2.2k

点赞数 4

文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/u014555006/article/details/121429316

版权

今天在用vue使用swiper插件时遇到这样的错误

vue-awesome-swiper.js?7212:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘_c’)

在这里插入图片描述

附上导入的代码：

import { swiper, swiperSlide} from 'vue-awesome-swiper'
import 'swiper/swiper-bundle.css'

解决方案：

在vue-awesome-swiper后面添加/src

在这里插入图片描述

import { swiper, swiperSlide} from 'vue-awesome-swiper/src'
import 'swiper/swiper-bundle.css'

附上完整代码：

<template>
  <div>
    <swiper :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>
  </div>
</template>

<script>
// swiper插件
import { swiper, swiperSlide} from 'vue-awesome-swiper/src'
import 'swiper/swiper-bundle.css'

export default {
  name: "TestComponent",
  // 注册组件
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOptions: {
        slidesPerView: 4,//显示个数
        direction: 'horizontal', // 水平方向
        pagination: {
          el: '.swiper-pagination'
        },
      }
    }
  },
}
</script>

<style scoped>
</style>