Vue-awesome swiper，两个组件通过彼此的按钮滑动答案

【问题标题】：Vue-awesome swiper, two components swipes by buttons of each otherVue-awesome swiper，两个组件通过彼此的按钮滑动
【发布时间】：2018-12-03 18:55:02
【问题描述】：

我使用 vue-awesome-swiper from here 有问题。 Swipers 有用于在内部滑动幻灯片的按钮（上一张幻灯片，下一张幻灯片），当我将这两个组件放在一个页面中时，它们会通过彼此的按钮滑动幻灯片。因此，如果我尝试在第一个滑动器中滑动到下一个滑块，第二个滑动器也会滑动到下一张幻灯片。这是我的组件代码：

    <template>
  <div class="container">
      <div class="row">
          <div class="col-xs-12">
            <div class='mobSwip'>
              <div class="swiper-container" id="quick-view-slider">
                <swiper :options="swiperOption">
                  <swiper-slide v-for="screen in screens" :key="screen.key"><img v-bind:src="`https://admin.springsapps.com${screen.url}`"/></swiper-slide>
                  <swiper-slide v-if="!screens"><img src="@/assets/images/quick-view-1.png"/></swiper-slide>
                </swiper>
              </div>
              <!-- <div class="swiper-pagination" slot="pagination"></div> -->
              <div class="swiper-button-next"><span class="icon-play"></span></div>
              <div class="swiper-button-prev"><span class="icon-play-flip"></span></div>
              <!-- <button @click="swipeNext">next</button> -->
            </div>
            </div>
          </div>
        </div>
</template>

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

  export default {
    props: {
      screens: {
        type: Array,
        required: false
      }
    },
    data: function () {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 30,
          centeredSlides: true,
          // pagination: {
          //   el: '.swiper-pagination',
          //   clickable: true
          // },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
            // nextEl: this.$el.querySelector('.swiper-button-next'),
            // prevEl: this.$el.querySelector('.swiper-button-prev')
          }
        },
      }
    },
    components: {
      swiper,
      swiperSlide
    }
  }
</script>

<style scoped>
  .swiper-slide {
    width: 60%;
  }
  .swiper-slide:nth-child(2n) {
      width: 40%;
  }
  .swiper-slide:nth-child(3n) {
      width: 20%;
  }
</style>

我尝试使用查询选择器，通过引用获取按钮类，尝试通过官方文档中的方法滑动，但它不起作用。这个按钮工作的唯一一种方法是在数据对象中按类获取它们，就像在我的代码中一样......我怎样才能使我的按钮有用和独立？

【问题讨论】：

在您提供的代码中，您似乎没有使用导入的swiper 和swiperSlide 组件，请查看此官方示例以了解其使用方式jsfiddle.net/bL983fjt
谢谢，这个例子有效，但我需要标签之外的按钮
我已经解决了！通过在 swiper 上查询 ref 并使用 this.$refs.mobileScreensSwiper.swiper.slideNext() 作为方法来实现

标签： javascript vue.js vue-component swiper

【解决方案1】：

我用

this.$refs.swiper.swiperInstance.autoplay.start()

【讨论】：

【解决方案2】：

这是为我解决的问题（Nuxt.js/SSR 项目）：

1) 在不同的组件中拥有两个滑动器（不确定是否需要）

2) 将 id 属性添加到按钮的 div 中： <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div> <div id="button-next-relacionados" class="swiper-button-next swiper-button-white"></div>

3) 在 swiper 选项对象中，引用新的 ids 而不是 swiper-button-prev 和 swiper-button-next 类：

swiperOption: {
        direction: 'horizontal',
        slidesPerView: 4,
        spaceBetween: 6,
        navigation: {
          nextEl: '#button-next-relacionados',
          prevEl: '#button-prev-relacionados'
        },

【讨论】：

【解决方案3】：

我已经解决了！通过在 swiper 上查询 ref 并使用

this.$refs.mobileScreensSwiper.swiper.slideNext()

作为方法

【讨论】：