今天用了一下vue-awesome-swiper，轮播数据是动态渲染的，遇到的坑是：配置 loop : true,
无效，不能轮循，查看代码是前后根本没有多插数据，于是百度一下，支的招不少，都不能奏效，
什么添加observer:true,observeParents:true,等都不能奏效，什么加载顺序，都没奏效；
如有遇到同样问题的朋友，可用我的这简单的方法，v-if判断一下，实现loop;

swiper容器那v-if判断一下，是否有数据可以解决；

下面列my code：

//这是我vue一个组件，
<template>
    <div>
        //第一个轮播   加了v-if 判断，可以实现 loop 轮循
        <swiper v-if="gglist.length>1" :options="swiperOption" ref="mySwiper" class="swiper-box">
            <!-- slides -->
            <swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
        第二个轮播  没加判断  不能实现loop  可试试看
        <swiper :options="swiperOption" ref="mySwiper2" class="swiper-box">
            <!-- slides -->
            <swiper-slide v-for="m in gglist">{{m}}</swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
    </div>
</template>

<script>
    //前提你已经下载好vue-awesome-swiper,swiper.min.css 引入
    import Vue from 'vue'
    import VueAwesomeSwiper from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.min.css'
    Vue.use(VueAwesomeSwiper)

    export default{
        components: {
            swiper:VueAwesomeSwiper.swiper,
            swiperSlide:VueAwesomeSwiper.swiperSlide
        },
        data(){
            return{
                //配置
                swiperOption: {
                  loop : true,
                  speed: 900,
                  notNextTick: true,
                  autoplay:true,
                  preloadImages: false,
                  pagination: {
                    el: '.swiper-pagination',
                  },
                  paginationClickable :true,
                  navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                  },
               },
               gglist:[],//存放的数据list

            }
        },
        beforeCreate:function(){

        },
        created:function(){

        },
        beforeMount: function () {

        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper
            }
        },
        mounted:function(){
            //这是我拿的代理地址的数据，你们需要换成自己的api地址
            Vue.axios.get('/api/trade/***').then((response) => {
              console.log(response);
              this.gglist = response.data.zbGongGao;
            })
        }
    }
</script>

<style lang="scss" scoped>
    .swiper-box{
        height: 280px;
        width: 100%;
    }
</style>

vue-awesome-swiper文档地址：https://www.npmjs.com/package/vue-axios

如此轮播还有其它问题可与me讨论一二…