vue-awesome-swiper 为什么使用axios动态获取照片，不能滑动，出现错误？

Question

swiper里的每张照片都加载完毕了，但是就是不能滑动，也看不到其他的照片，只有第一张

出现如下错误

代码如下

    <div class="my-swiper">
        <swiper :options="swiperOption"  ref="mySwiper">
            <swiper-slide v-for="item of items">
              <img :src="item.url" :alt="item.name">
              <div class="swiper-button-prev"></div>
              <div class="swiper-button-next"></div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>

        items: '',
        swiperOption: {
                notNextTick: true,
                pagination: '.swiper-pagination',
                slidesPerView: 'auto',
                centeredSlides: true,
                effect : 'coverflow',
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                autoplayDisableOnInteraction: false,
                autoplay: 2000,
                loop: true,
                paginationClickable: true,
                spaceBetween: 30,
                  onSlideChangeEnd: swiper => {
                    this.page = swiper.realIndex+1;
                    this.index = swiper.realIndex;
                  }
                },

axios取数据

 getData () {
        this.$http({
          url: 'http://192.168.1.108:3000/index/slider',
          method: 'get'
        }).then((res) => {
          this.items = res.data.slider
        }).catch((res) => {
          console.log('error:',res)
        })
      },

mounted() {
      this.getData();
    }

问题好像解决了
swiper里的这个属性出了问题，注释掉就好了，但是不知道为什么？
// slidesPerView: 'auto',

Answer 1

你看下哪里用到了classList,你的数据都没有classList，当然报错，你在用到这个属性的时候加上判断

Answer 2

你循环slide的时候应该是从一个对象的属性里面拿的，比如
data.xxx.classList
在你取数据的生活，data应该是一个空对象，并没有属性'xxx',swiper循环的时候xxx是undefined，所以从undefined中取classList会报错

你需要在data里面直接定义一个classList

data(){
    return {
        classList:[]
    }
}

之后将异步取回的关于swiper的字段单独赋值给classList

之后从classList中循环即可

Answer 3

楼主最后是怎么解决的？我现在是异步获取的值给轮播图子组件传值，并不是在当前组件异步获取的值，在哪个钩子里给classList赋值呀？

Answer 4

楼主，你这个问题是怎么解决的，我注释了 slidesPerView: 'auto', 这个之后是可以轮播了，但是底层又报错了，而且不能自动轮播，设置了自动轮播也没用

Answer 5

注释以后好了，，感谢楼主分享，，，，，么么哒