get the data in the vue page and assign the value to the lists value in the data character in mounted, such as
this.lists=this.$route.params.lists;
but the length of lists is uncertain, so the data can only be displayed through v-for
<div v-for="item in lists">{{item.a}}</div>
want to display this group of data through 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 is as follows:
this.swiper = new Swiper(".swiper-container", {
pagination: ".swiper-pagination",
slidesPerView: "auto",
centeredSlides: true,
paginationClickable: true,
spaceBetween: 20,
onSlideChangeEnd: function(swiper) {
console.log(swiper);
}});
at this time, stutters will appear in the page display, and the rotation cannot be converted, but if the number of swiper-slide is determined, it will display normally. How can this problem be solved?