vue中v-for配合使用swiper的问题

Question

在vue页面中获得数据，并在mounted中将值赋值符data中的lists值，例如 this.lists=this.$route.params.lists;但是lists的长度是不确定的，所以只能通过v-for 来将数据进行展示  <div v-for="item in lists">{{item.a}}</div>想要将这组数据通过swiper进行展示   <div class="banner swiper-container" @click="aa()">        <div class="swiper-wrapper">             <div class="swiper-slide" v-for="item in lists">{{item.a}}</div>        </div>        <div class="swiper-pagination"></div>    </div>js如下： this.swiper = new Swiper('.swiper-container', {            pagination: '.swiper-pagination',            slidesPerView: 'auto',            centeredSlides: true,            paginationClickable: true,            spaceBetween: 20,            onSlideChangeEnd: function(swiper) {                     console.log(swiper);             }});这个时候页面展示就会出现出现卡顿，并不能进行轮播转换，但是如果.swiper-slide的数量是确定的就会正常显示，这个问题如何才能解决能？

Answer 1

this.lists=this.$route.params.liststhis.$nextTick(() => {    
    this.swiper = new Swiper('.swiper-container', {            pagination: '.swiper-pagination',            slidesPerView: 'auto',            centeredSlides: true,            paginationClickable: true,            spaceBetween: 20,            onSlideChangeEnd: function(swiper) {    
                console.log(swiper);
            }
      })
})