关于前端:vue-swiper-5x-vueawesomeswiper-配置缩略图双向控制

博客看了许多大多不得要领，解决基本有效，到处都是复制粘贴。
其实不难，就是懒，还是要本人写吧，本人入手饥寒交迫。
因为一些未知的起因（可能是 vue-awesome-swiper/swiper 自身的缺点，并没有深入研究源码，心愿大牛斧正），以及已知的异步动静加载的起因（v-for 循环），官网的配置并不能失效

依赖版本

"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"swiper": "^5.4.5",

data 中的配置如下

data() {
    const _this = this;
    return {
      swiperOptions1: {
        // updateOnImagesReady: true,
        thumbs: {slideThumbActiveClass: "my-slide-thumb-active",// 缩略图激活态 class 能够自定义款式},
        on: {slideChangeTransitionStart: function() {//_this.activeProduct = _this.giftList[this.realIndex];  // 业务逻辑
          },
        },
      },
      swiperOptions2: {
        slidesPerView: 3.5,
        watchSlidesVisibility: true, // 避免不可点击
        on: {click: function(event) {_this.swiper1.slideTo(this.clickedIndex);
                //this.clickedIndex - 1  使激活的 slide 滚动到一个适合的地位
            this.slideTo(this.clickedIndex >= 1 ? this.clickedIndex - 1 : this.clickedIndex);
          },
        },
      },
   }
}

计算属性获取实例

computed: {swiper1() {return this.$refs.mySwiper1.$swiper;},
    swiper2() {return this.$refs.mySwiper2.$swiper;},
  },

更新 swiper 实例

间接配置 thumbs 是有效的，
须要在异步数据加载结束之后，对 swiper 进行 更新，否则，配置是也是无奈失效的

mounted() {this.asynchronousFun()
},

methods: {
    // 确保异步数据渲染实现后，更新 swiper
    swiperPopOpened() {this.$nextTick(() => {
        this.swiper1.thumbs.swiper = this.swiper2;
        this.swiper1.update();});
    },
    asynchronousFun() {axios.post('xxx').then(res => {
            this.scource =res.data;
            this.$nextTick(() => {this.swiperPopOpened()
            })
        })
    }
}