3

When I used 'Swiper' in nuxt.js and installed 'vue-awesome-swiper', I copied the thumbnail code from the official website, But I kept getting an error 'Cannot read properties of undefined (reading 'controller')'. I changed the version as I found it, but it didn't solve the problem

"swiper": "^7.4.1",
"vue-awesome-swiper": "^3.1.3",

mounted() {
  this.$nextTick(() => {
    console.log(this.$refs.swiperTop.swiper);
    console.log(this.$refs.swiperThumbs.swiper);
    const swiperTop = this.$refs.swiperTop.$swiper;
    const swiperThumbs = this.$refs.swiperThumbs.$swiper;
    swiperTop.controller.control = swiperThumbs;
    swiperThumbs.controller.control = swiperTop;
  });
},
kissu
  • 40,416
  • 14
  • 65
  • 133
Leeqi7
  • 95
  • 1
  • 10
  • Does this answer your question? [Using Swiper js with Nuxt throws dependency not found error](https://stackoverflow.com/questions/69643687/using-swiper-js-with-nuxt-throws-dependency-not-found-error) – kissu Jan 06 '22 at 02:12
  • 1
    @kissu Thank you, I don't have the answers in this thread, but I just found the solution somewhere else. – Leeqi7 Jan 06 '22 at 02:19
  • Did you got your issue solved? Feel free to accept it. – kissu Mar 14 '22 at 21:10

2 Answers2

1
"dependencies": {
    "nuxt": "^2.2.0",
    "swiper": "5",
    "vue-awesome-swiper": "^4.1.1",
}

I can report the same issue with the swiper property. According to the doc, I use the same code for a computed property for getting all the refs. In dev mode it works fine.

computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    }

But after deployment console shows the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'swiper').

So, as mentioned above I add $el for resolve this issue this.$refs.mySwiper.$el.swiper Thanks guys!

Yevhenii Babenko
  • 11
  • 2
0

Change

const swiperTop = this.$refs.swiperTop.$swiper;
const swiperThumbs = this.$refs.swiperThumbs.$swiper;

to

const swiperTop = this.$refs.swiperTop.$el.swiper
const swiperThumbs = this.$refs.swiperThumbs.$el.swiper
Leeqi7
  • 95
  • 1
  • 10