vue-awesome-swiper 踩坑

前言

网上很多教程在轮播图需要请求后台数据展示的情况下都不好使，下面是我自己踩坑后得出的代码。参考vue的坑 vue-awesome-swiper官方指南

代码

<template>
    <swiper :options="swiperOption" v-if="show">
        <swiper-slide v-for="item in images" :key="item.value">
            <img :src="item.url"/>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
</template>

<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import 'swiper/dist/css/swiper.css';

    export default {
        name: "banner",
        props: {
            images: Array
        },
        components: {
            swiper,
            swiperSlide
        },
        data() {
            return {
                swiperOption: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    observer: true,
                    observeParents: true,
                    autoplay: {
                        delay: 3000,
                        waitForTransition: true
                    },
                    loop: true
                },
                show: false
            }
        },
        watch: {
            images: function (newValue, oldValue) {
                this.show = true;
            }
        }
    }
</script>

<style scoped>

    img {
        width: 100%;
        height: 100%;
    }

</style>

给组件设置一个v-if，watch props传进来的参数，也就是请求完获得数据以后再显示就行了