vue.js - vue项目中使用swiper插件出现生命周期报错！

问题描述

问 题

vue-cli引入swiper插件，页面上轮播运行正常，但是一直出现这个报错！

HTML：
<div class="carousel-pic">

        <swiper>
            <swiper-slide v-for="(banner,index) in banners" class="crsl-pic" :key="index">
                <img :src="banner">
            </swiper-slide>
        </swiper>
    </div>
  <div class="carousel-text">
      <div class="icon-sound"></div>
      <div class="info">
          <router-link to="/info">资&nbsp;讯</router-link>
      </div>
      <swiper>
            <swiper-slide v-for="(item,index) in items" :key="index">
                <div class="crsl-text">
                  <router-link to="#"> {{ item }} </router-link>
              </div>
             </swiper-slide>
      </swiper>
  </div>

JS：
<script>
import vfooter from './footer/footer'
export default {

name: 'home-page',

components: {

  vfooter

},
data() {

  return {
      banners: [
          '../../static/images/carousel-pic.jpg',
          '../../static/images/carousel-pic.jpg',
          '../../static/images/carousel-pic.jpg'
      ],
      items: [
          "2017年全民创业-你还在等什么1？",
          "2017年全民创业-你还在等什么2？",
          "2017年全民创业-你还在等什么3？"
      ],
      swiperOption: {
          pagination: '.swiper-pagination',
          autoplay: 3000,
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true
          // direction: 'vertical'
      }
  }

},
computed: {

  swiper() {
      return this.$refs.mySwiper.swiper;
  }

},
mounted () {

  this.swiper.slideTo(0,0,false)

}
}
</script>

解决方案

你的refs.mySwiper不存在啊.

这篇关于vue.js - vue项目中使用swiper插件出现生命周期报错！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！