vue-awesome-swiper缩略图控制循环无效解决方案

vue-awesome-swiper缩略图控制循环无效解决方案

在使用vue-awesome-swiper当中的Thumbs Gallery With Two-Way Control Loop （ 缩略图控制循环 ）
时，官方示例的代码并不好用，不是出现bug就是缩略图只能居中，不能从左下角对齐

官方demo

遇到无限轮播无效问题

原因是没有对图片数据进行校验判断。

解决方法

这次图片可以轮播了。但是top和thumbs在变化时又出现了不同步的问题。

top和thumbs在变化时又出现了不同步的问题。

此时会在控制台报错找不到Controller，找不到swiper。

原因是mounted中找不到$ref.swiperTop.swiper

vue官网是这样说的

当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。
关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

解决方法
updated替换mounted，但是这样每一次DOM结构更新，vue都会调用一次updated(){}钩子函数，而我们只需要在swiper初始化的时候进行调用。

updated () {
    if (this.isInit === 1) {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        const swiperThumbs = this.$refs.swiperThumbs.swiper
        console.log(this.$refs)
        swiperTop.controller.control = swiperThumbs
        swiperThumbs.controller.control = swiperTop
      })
      this.isInit = 0
    }
  },