The use of record swiper among the vue

2020 February 24 13:19:05

1 : First swiper initialization must ensure that the slide has been rendered 
solve: So initialize method must be placed 
. NextTick that $ ( function () {
     // initialize swiper 
}) 

2 : When we want to update swiper time, simply update the array find swiper rendering error 
Solution: this problem occurs because, swiper carousel effect are several components to help us generate real dom 
when we update the data vue, which still exists several real dom. Way I used to add a whole state
 <div class = " Swiper Swiper-Container " > 
    <div class = " Swiper-wrapper " V- IF = " swiperFlag " > // Look here
         <div class = " Swiper-Slide " V- for = "(item, index) in game_result.contens" :key="item.id">
            <i class="icon"></i>
            <img :src="item.pic" alt="">
            <a :href="item.url" style="color: brown;">{{item.id}}</a>
        </div>
    </div>
    <div class="pagination"></div>
</div>

if (that.mySwiper) {
    that.swiperFlag = false// first remove the entire swiper off 
    that.game_result = that.game_info [index] // then updated vue array 
    that. NextTick $ ( function () { 
        that.swiperFlag = to true // in the back dom generated, this time generating vue slide only data generated by 
        that. nextTick $ ( function () { 
            that.initSwiper () // re-initialized once Swiper 
        }) 
    }) 
} the else { 
    that.game_result =   that.game_info [index] 
    that. $ nextTick ( function () { 
        that.initSwiper () 
    }) 
}