解决Vue v-for动态创建的轮播图不能正常加载问题

问题产生的时机：异步获得数据，和立即使用数据的插件发生冲突（数据没回来就进行操作）

问题描述 ： 组件挂载（mounted）之后，发ajax请求到后台想要轮播图 图片数据，在mounted里面new Swiper实例之后，后台请求数据的结果还没返回，new Swiper拿不到图片数据，轮播图无法滑动，且分页按钮不显示，前进后退按钮点击无效：

解决方法

方法一

给想要得到的后台数据添加监听（watch）

1 .等到仓库里的数据发生变化时，也就是组件拿到数据时 再去new 一个swiper实例，这一步只能保证轮播图的数据已经有了 ，不能保证数据已经渲染到页面上了（v-for没有执行结束）

）

1. 使用nextTick生命周期（在下次dom更新循环结束（v-for）以后延迟回调，在修改数据之后立即执行这个方法，获取更新后的dom）
2. 也就是说修改数据之后nextTick开始执行，循环结束（v-for）之后执行延迟回调

//挂载完毕后给通知仓库给服务器发请求
mounted() {
    this.$store.dispatch("getBannerList");
  },
 //将仓库中的数据传到组件上
  computed: {
    ...mapState({
      bannerList: (state) => {
        // console.log("***", state.home.getBannerList);

        return state.home.bannerList;
      },
    }),
  },
    //监视轮播图数据的变化
watch: {
 // 监视属性名要和要监视的数据或者变量名一致
    bannerList() {
      //
      this.$nextTick(function () {
        varmySwiper = newSwiper(this.$refs.mySwiper, {
          // direction: "vertical", // 垂直切换选项
          loop:true, // 循环模式选项
          // 如果需要分页器
          pagination: {
            el:".swiper-pagination",
            clickable:true,
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl:".swiper-button-next",
            prevEl:".swiper-button-prev",
          },
        });
      });
    },
  },

方法二

父组件mounted中发请求获取数据，

 mounted() {
    this.$store.dispatch("getFloorList");
  },
  computed: {
    ...mapState({
      floorList: (state) => {
        return state.home.floorList;
      },
    }),
  },

然后组件通信把数据传输过来，

 //给floor组件传输数据
<Floor floorList="floorListr"> </Floor>

子组件接收props父组件传递过来的数据,mounted就可以直接new swiper

 props: ["floor"],
   mounted() {
    var mySwiper = new Swiper(this.$refs.floorSwiper, {
      // direction: "vertical", // 垂直切换选项
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },