vue-awesome-swiper / 按钮名称是共享的，所以其他 swiper 也会移动

Question

<template>
  <swiper v-for="item in items" :key="item.id" :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
    <swiper-slide>I'm Slide 1</swiper-slide>
    <swiper-slide>I'm Slide 2</swiper-slide>
    <swiper-slide>I'm Slide 3</swiper-slide>
    <swiper-slide>I'm Slide 4</swiper-slide>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
  export default {
    data() {
      return {
             //sample items
        items: [ 
          {
            1:1
          },
          {
            2:2
          },
          {
            3:3
          },
        ],
        swiperOption: {
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        }
      }
    }
  }
</script>

v-for 创建了很多 swippers。 但是，按钮名称重叠，所以滑动条都一起移动。

我在 Swiper API 中寻找可以解决这个问题的东西，但我找不到。

如果有办法解决这个问题，请帮助我.....

Answer 1

如果您需要唯一名称，请尝试将唯一键添加到 ref：

:ref="'mySwiper' + item.id"

添加冒号（v-bind 的快捷方式）可以将item.id 用作变量。