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 создает много обманщиков. Тем не менее, имя кнопки перекрывается, так что все swiper перемещаются вместе.

Я искал что-то в Swiper API, которое могло бы решить эту проблему, но я не смог.

Пожалуйста, помогите мне, если есть это способ решить эту проблему .....

Answer 1

Если вам нужны уникальные имена, попробуйте добавить уникальный ключ в ссылку:

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

Добавление двоеточия (ярлык для v-bind) позволяет использовать item.id в качестве переменной.