前端 - vue.js 轮播问题 ajax获取到图片路径再渲染图片，可是轮播失效，使用插件为swiper.js

问题描述

问 题

HTML:
       <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="slide in slideList"> 
                   <img v-bind:src="slide.slide_img"> 
               </div>
         </div>


VUE:
    ready(){
            this.getResource();
                    
        },

        methods:{
            getResource:function(){
                let self = this;
                service.getResource().done(function(res){
                    self.slideList = res.data.slide;
                    var mySwiper = new Swiper('.swiper-container',{
                           pagination: '.swiper-pagination',
                           loop:true,
                           grabCursor: true,
                           paginationClickable: true,
                           autoplay:5000
                          });    
                }).fail(function(res){
                    console.log(res);
                })
            },
        }

解决方案

你们都错了 这是vue.js机制问题 本人其实早就已经解决了问题
ajax获取到了数据后调用vue.nextTick()便可。

这篇关于前端 - vue.js 轮播问题 ajax获取到图片路径再渲染图片，可是轮播失效，使用插件为swiper.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！