vue-awesome-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会创建很多拖鞋。但是，按钮名称重叠，因此滑动器都一起移动。

我在Swiper API中寻找了可以解决此问题的方法，但是我做不到。

如果有解决此问题的方法，请帮助我.....

Answer 1

如果需要唯一的名称，请尝试将唯一的密钥添加到引用中：