Vue-awesome-swiper: i can not get swiper Object

[reynold-Yang]

TypeError: Cannot read property 'swiper' of undefined
at VueComponent.swiper (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/NewActivity.vue:109:40)
at Watcher.get (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3114:25)
at Watcher.evaluate (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3221:21)
at VueComponent.computedGetter [as swiper] (webpack-internal:///./node_modules/vue/dist/vue.esm.js:3473:17)
at VueComponent.remoteFunction (:2:14)

[enesyurtlu]

+1 I cannot, too... How to fix this issue?

[surmon-china]

Show me your code.

[enesyurtlu]

I deleted my code. But It is about methods. For example:
Defined a method
slideToHovered(index) { this.swiper.slideTo(index); }

and in template:
<swiper-slide :onmouseover="slideToHovered(index)">

This gives error with data from api. While vue getting started, it tries to find swiper but it cannot.

[reynold-Yang]

if I use global swiper, this ok, but i use module swiper , i can't get that!

[reynold-Yang]

look like this

i can't get swiper Object

[bormisov1]

@reynold-Yang You can't access imported swiper object in your methods?

[chenendian]

you can see https://github.com/surmon-china/vue-awesome-swiper/issues/202
it resolve

[alejandroiglesias]

I also cannot get the reference to the swiper instance. I'm initializing it like this:

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// require styles
import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default global options } */)

And then using it like this in my component:

<template functional>
    <swiper ref="swiperRef">
        <swiper-slide>Slide</swiper-slide>
    </swiper>
</template>

<script>
export default {
    computed: {
        swiper(vm) {
            console.log('swiper ref', vm.$refs.swiperRef)
            return vm.$refs.swiperRef.swiper
        },
    },
}
</script>

As instructed in the docs.
@surmon-china can you please provide some insight into what's happening?

[chenendian]

i use it in my component, no use it in gobal

<script>
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
const { swiper, swiperSlide } = VueAwesomeSwiper
export default {
  components: {
     swiper,
     swiperSlide
  },
  computed: {
     swiper() {
     return this.$refs.imgSwiper.swiper;
   }
 },
watch: {
    menuList: {
      handler(newArr, oldArr) {
        if(newArr.length == this.arrLength) {
          console.log(this.swiper)
          this.swiper.slideTo(this.arrLength - 1)
        }
      }
    }
  },
}
</script>

[alejandroiglesias]

@chenendian I also tried to use it like that (ie, locally instead of registering it as a global component), but still cannot get the ref to work. The component's $refs property is always an empty object.

[alejandroiglesias]

I also want to clarify, in both cases (registering the plugin locally or globally) the slider works fine, but I just cannot get the instance from the ref.

[alejandroiglesias]

I want to report that I upgraded the project from Vue version 2.5.20 to version 2.6.10 and the references work just fine.

[cagcak]

Just import the library components as follows:

import { swiper, swiperSlide } from 'vue-awesome-swiper'

then use them after mounted, or in as methods, not in as computed properties:

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

mounted () {
   return this.$refs.length // 1
}

Caution

• Do not call the swiper instance object inside transition or transition-group. If you need to do, call it in transition-end method.

[MichalKrakow]

With vue-awesome-swiper 4.x (and swiper 5) you go:
this.$refs.mySwiper.swiperInstance.

[surmon-china]

@MichalKrakow Yes.

• swiperInstance === $swiper
• this.$refs.mySwiper.$swiper