在Vue js模式插件中，vue swiper swiper不能正常工作

Question

我正在使用vue-js-modal进行产品快速查看，并尝试使用vue-awesome-swiper创建一个图片库，但问题是在这个模式图片库之外，我可以很好地工作，但在模式插件内部，它会显示一个错误，不能正常工作

​

我在这个问题上找不到任何解决方案，请任何人帮助我

我的代码如下

<template>
 <modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true">
  <div class="modal-content-wrapper">
   <button @click="hide" class="modal-close">Close me</button>

   <div class="product-details">
    <div class="product-carousel">
      <!-- swiper1 -->
     <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
      </swiper-slide>
     </swiper>

      <!-- swiper2 Thumbs -->
     <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/GreenLimes_jrodle.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/Yellow_Limes_y0lbyo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
       <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614569/pickbazar/grocery/RedCherries_zylnoo.jpg" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="https://res.cloudinary.com/redq-inc/image/upload/c_fit,q_auto:best,w_300/v1589614568/pickbazar/grocery/CelerySticks_ulljfz.jpg" alt="">
      </swiper-slide>
     </swiper>
    </div>
    <div class="p-10">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur at, 
      dignissimos dolorum enim ex expedita fuga harum.
    </div>
   </div>
  </div>
 </modal>
</template>


<script>
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  import 'swiper/css/swiper.css'

  export default {
    name: "Products",
    components : {
      Swiper, SwiperSlide
    },
    data() {
     return {
        swiperOptionTop: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
     }
    },
    mounted() {
      this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.$swiper
      const swiperThumbs = this.$refs.swiperThumbs.$swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
   },

   methods : {
     show () {
       this.$modal.show('quick-view');
     },
     hide () {
       this.$modal.hide('quick-view');
     }
   }
 }
</script>

Answer 1

在模式变得可见或开始转换后，您必须使用事件进行ref工作使用@opened事件发射。请参阅此插件事件here

<template>
  <modal name="quick-view" width="90%" height="auto" :maxWidth="1000" :maxHeight="600" :adaptive="true"
             @opened="opened"
        >
        
    ............

  </modal>
</template>

<script>
 export default {
   methods: {
    opened() {
     this.$nextTick(() => {
       const swiperTop = this.$refs.swiperTop.$swiper
       const swiperThumbs = this.$refs.swiperThumbs.$swiper
       swiperTop.controller.control = swiperThumbs
       swiperThumbs.controller.control = swiperTop
     })
    }
   }
  }
</script>