vue-awesome-swiper使用傳送門，今天使用vue-awesome-swiper做一個數據信息滾動效果的時候，頁面載入完後，沒出現什麼問題，但是一重新整理當前頁面佈局就錯亂了，而且loop也失效了。

正確佈局如下：

一重新整理頁面：

網上查了下，發現是載入順序的問題，因為資料還沒有完全載入的時候就已經渲染swiper了。

解決的辦法是在初始化的配置選項裡面新增一下兩個屬性就可以了：

observer:true,//修改swiper自己或子元素時，自動初始化swiper
observeParents:true,//修改swiper的父元素時，自動初始化swiper

貼一下自己的程式碼：

html：

<swiper :options="swiperOption" ref="mySwiper" class="donate-list swiper-no-swiping">
						<swiper-slide class="donate-item clear" v-for="(item,index) in scrollList" :key="index">
							<p>{{index}}ID：{{item.id}}</p>
							<p>{{item.title}}</p>
							<p>{{item.seconds}}</p>
						</swiper-slide>
					</swiper>
 

js：

data(){
		return {
			scrollList:[{seconds: "2017-03-10", title: "捐贈300", id: "11346279"},{seconds: "2018-01-21", title: "捐贈80", id: "11352761"},
{seconds: "2018-05-16", title: "捐贈100", id: "11354512"}],
			swiperOption:{
				autoplay: {
					delay: 1000
				},
				direction: 'vertical',	//設定滾動方向為垂直
				slidesPerView: 3,	//設定顯示個數為3
				loop: true,
				observer:true,//修改swiper自己或子元素時，自動初始化swiper
          		observeParents:true,//修改swiper的父元素時，自動初始化swiper
			},
		}
	},