Javascript vue awesome swiper/按钮名称是共享的，因此其他swiper移动也是共享的 我是幻灯片1 我是幻灯片2 我是幻灯片3 我是幻灯片4 导出默认值{ 数据（）{ 返回{ //样本项目 项目：[ { 1:1 }, { 2:2 }, { 3:3 }, ], 开关选项：{ 导航：{ nextEl:“.swiper按钮下一步”， prevEl:“.swiper按钮prev” } } } } }

v-for创建了许多开关。 但是，按钮名称重叠，因此开关都一起移动

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

---

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

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

<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-bind的快捷方式）可以将

item.id

用作变量

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