在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue-awesome-swiper 為什么使用axios動(dòng)態(tài)獲取照片，不能滑動(dòng)

vue-awesome-swiper 為什么使用axios動(dòng)態(tài)獲取照片，不能滑動(dòng)，出現(xiàn)錯(cuò)誤？

swiper里的每張照片都加載完畢了，但是就是不能滑動(dòng)，也看不到其他的照片，只有第一張

出現(xiàn)如下錯(cuò)誤
clipboard.png

代碼如下

    <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取數(shù)據(jù)

 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里的這個(gè)屬性出了問題，注釋掉就好了，但是不知道為什么？
// slidesPerView: 'auto',

回答
編輯回答
墨小白

你循環(huán)slide的時(shí)候應(yīng)該是從一個(gè)對(duì)象的屬性里面拿的，比如
data.xxx.classList
在你取數(shù)據(jù)的生活，data應(yīng)該是一個(gè)空對(duì)象，并沒有屬性'xxx',swiper循環(huán)的時(shí)候xxx是undefined，所以從undefined中取classList會(huì)報(bào)錯(cuò)

你需要在data里面直接定義一個(gè)classList

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

之后將異步取回的關(guān)于swiper的字段單獨(dú)賦值給classList

之后從classList中循環(huán)即可

2017年3月5日 07:20
編輯回答
冷眸

你看下哪里用到了classList,你的數(shù)據(jù)都沒有classList，當(dāng)然報(bào)錯(cuò)，你在用到這個(gè)屬性的時(shí)候加上判斷

2017年6月7日 04:50
編輯回答
汐顏

樓主最后是怎么解決的？我現(xiàn)在是異步獲取的值給輪播圖子組件傳值，并不是在當(dāng)前組件異步獲取的值，在哪個(gè)鉤子里給classList賦值呀？

2017年3月30日 07:00
編輯回答
寫榮

樓主，你這個(gè)問題是怎么解決的，我注釋了 slidesPerView: 'auto', 這個(gè)之后是可以輪播了，但是底層又報(bào)錯(cuò)了，而且不能自動(dòng)輪播，設(shè)置了自動(dòng)輪播也沒用

2017年6月15日 20:19