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

Question

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

Answer 1

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

Answer 2

挂载轮播的DOM节点没给对吧, new Swiper里写的是 '.swiper-container' 而模板里写的是 '.swiper-wrapper'

Answer 3

你这样必然失败的，因为你没细看swiper的文档，这个会和swiper的机制冲突，我的建议是这样：你ajax获取到数据之后，使用swiper的appendSlide方法，具体实例http://www.swiper.com.cn/api/...，如果是多张可以把他写成一个字符串的数组再appendSlide进去

Answer 4

我也遇到一样的问题，请问怎么解决？望解答，非常感谢

Answer 5

参考这篇文章 https://segmentfault.com/a/11...

Answer 6