vue中使用swiper失效问题及解决

<div v-for="(item, index) in videoList" :key="index">
    <div class="index_list01">
        <div class="index_list">
            <div class="index_list1">
                <div class="index_list1_1">{{item.title}}</div>
                <div class="index_list1_2" @click="gotoPage('/mine/search')">查看更多 ></div>
            </div>
            <div class="index_list2">
            // 此处无关代码省略
            </div>
        </div>
    </div>
    <div v-if="index == 0" class="advert">
        <div class="banner">
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div v-for="(item, index) in advertList" :key="item.id || index" class="swiper-slide"><img :src="item.picUrl"/></div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </div>
</div>

// data中添加swiper状态
data(){
	return {
		swiper: ''
	}
}

// 在methods里定义初始化的方法
initSwiper(){
    if(this.swiper != ''){return}
    this.swiper = new Swiper('.swiper-container', {
        loop: true,
    })
}

getInfo() {
    this.$api.index.getIndexInfo().then(res => {
        let {indexCenterBannerList, classifyListCollect} = res.data
        let videoKeys = Object.keys(classifyListCollect)
        this.advertList = indexCenterBannerList
        this.videoList = videoKeys.map(item =>{
            return {
                title: item,
                list: classifyListCollect[item]
            }
        })
        // 将初始化方法放在数据请求后的下一个dom更新后
        this.$nextTick(()=>{
            this.initSwiper()
        })
    })
}