vue-awesome-swiper 报错（“TypeError: Cannot read property ‘slideTo‘ of undefined“），填坑

因为业务需要需要轮播组件，所以选择了vue-awesome-swiper

发现一个坑大家注意一下

直接npm（版本6.10）安装,安装下来的版本是+ swiper@3.4.2 + vue-awesome-swiper@2.6.7

npm install swiper vue-awesome-swiper --save

关于使用实例可以从组件官网获取

github官网
中文官网

在官网的参考写法中需要注意两个地方

• CSS文件的引入可能随着版本不一样路径会有所不同，所以一定先要检查css文件的引入
  
• 安装目前官网的写法还会爆一个错误，在这里特意提一下这个错误的原因
  官网的vue实例中，demo是这样子写计算属性的

   computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    },
   mounted() {
      console.log('Current Swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }

这样写在下面调用该属性的方法是会报错，因为这样子下面的钩子函数中获取不到值。

后来控制台打印了this对象看了看swiper对象中的属性，方法没有$符号应该写成

this.$refs.mySwiper.swiper

修改之后，在修改一下相关参数，调整一下大小，可以正常使用啦