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);             }       }) })