mounted 前台拉取数据 swiper loop 无效 Nuxt框架

问题描述：使用了mounted拉取数据，使用Swiper进行轮播，发下设置的loop属性无效。

原因：swiper里的轮播数据是必须要在，swiper组件初始化的时候就必须存在，否则生成的swiper是没有数据的。若数据是在swiper组件生成后才加载的，这时swiper里的轮播数据是会变，但是swiper的配置还是更具初始化时的数据创建的，所以loop无效。

解决方法：

1.在swiper使用的父组件里加载数据，通过props传入swiper所在的子组件。

2.百度搜索"swiper 动态加载数据"

3.使用如下方法，利用v-if,重新加载swiper。

<template>

    <div v-if="recomGoodsArray_.length>=1" class="swiper s-rg__left__area__list" v-swiper:swiper="swiperOption">

      <div class="swiper-wrapper">

        <div class="swiper-slide swiper-wrapper__child" v-for="(item,index) in dataArray"  :key="index">

               {{item}}

        </div>

       </div>

    </div>

</template>

<script>

    import     {请求接口}    from '接口文件'    //引入数据请求接口，这是我自己项目的封装

    export default {

        data(){

            return:{

                dataArray:[],

                swiperOption: {

                    loop:false,

                   direction:'vertical',

                   slidesPerView:"auto",

                },

            }

        }，

        mounted（）{

            请求接口().then(res=>{

                this.dataArray=res.data

            }

        }

    }

</script>