vue-awesome-swiper

vue-awesome-swiper copied to clipboard

code:

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

<swiper ref="mySwiper">
......
</swiper>

computed: {
      swiper () {
        return this.$refs.mySwiper.$swiper
      }
},
activated () {
      this.swiper.slideNext(1000)
}

error:

vue.esm.js?65d7:628 [Vue warn]: Error in activated hook: "TypeError: Cannot read property '$swiper' of undefined"

According to the official instructions configuration, do not know why can not find

beacuse of different version, when i use v3.1.3, it's swiper, when i use v4.1.1, it's $swiper

Getting the same error in 4.1.1. Have tried .swiper and .$swiper with no luck

Is there any solution ? I got same error. I m using nuxt js.

Swiper version : "vue-awesome-swiper": "^4.1.1",

Any update on this?

+1

Is there any solution ? I got same error. I m using nuxt js.

Swiper version : "vue-awesome-swiper": "^4.1.1",

It’s not a bug. $swiper instance appears on “mounted” hook, but “computed” calculates some early. Also using $refs in computed is not good idea, cause it’s not reactive var, so computed going not to recalc after $swiper instance change.

Use something like mounted () { this.swiperInstance = this.$swiper }

现在解决了吗？

现在解决了吗？

要指定下载对应的版本，swiper5.x,另外vue-awesome-swiper4.x,应该就好了，不然问题一堆，感觉吧swiper不友好，很多莫名的bug，居然还没有vue2.x的swiper对应教程demo,研究起来累。

现在解决了吗？

要指定下载对应的版本，swiper5.x,另外vue-awesome-swiper4.x,应该就好了，不然问题一堆，感觉吧swiper不友好，很多莫名的bug，居然还没有vue2.x的swiper对应教程demo,研究起来累。 我发现了，不能写在v-if里 只要外面任何一层套了v-if, 就拿不到$swiper