Events for swiper-container are not firing (v2.0.0-1)

[DaniZGit]

Hello,

i just tried implementing nuxt-swiper into my project and I'm confused as to why the events are not firing. I'm just trying to get the current index everytime the slide changes ( to create pagination ).

Module version: 2.0.0-1 Installed with: pnpm i nuxt-swiper@next

The example below tries to catch the @activeIndexChange event. Am I maybe calling/configuring swiper components wrong ? Link to StackBlitz example: https://stackblitz.com/edit/nuxt-starter-m7khpv

<template>
  <div class="container">
    <ClientOnly>
      <swiper-container
        ref="swiperRef"
        class="w-full h-full"
        effect="cards"
        :slides-per-view="1"
        :grab-cursor="true"
        :initial-slide="currentSlideIndex"
        @activeIndexChange="onIndexChange"
      >
        <swiper-slide
          v-for="object in objects"
          :key="object.id"
          class="w-full !h-auto !aspect-thumbnail my-auto"
          style="
            height: 200px;
            background-color: red;
            text-align: center;
            padding-top: 150px;
          "
        >
          <span>
            {{ object.id }}
          </span>
        </swiper-slide>
      </swiper-container>
    </ClientOnly>
    <div>current active index - {{ currentSlideIndex }}</div>
  </div>
</template>

<script lang="ts" setup>
  const objects = ref([
    {
      id: 1,
    },
    {
      id: 2,
    },
    {
      id: 3,
    },
    {
      id: 4,
    },
    {
      id: 5,
    },
  ]);
  const swiperRef = ref(null);
  const swiper = useSwiper(swiperRef);

  const currentSlideIndex = ref(2);
  const onIndexChange = (e: any) => {
    console.log('index changed', e);
    currentSlideIndex.value = e;
  };
</script>

<style>
  .container {
    width: 50%;
    margin: auto auto;
  }
</style>

[cpreston321]

With web components you will have to use DOM event listener vs Vue prop listener.

Events to Listen too: https://swiperjs.com/swiper-api#event-activeIndexChange Web Component Event usage: https://swiperjs.com/element#events

<template>
  <div class="container">
    <ClientOnly>
      <swiper-container
        ref="swiperRef"
        class="w-full h-full"
        effect="cards"
        :slides-per-view="1"
        :grab-cursor="true"
        :initial-slide="currentSlideIndex"
      >
        <swiper-slide
          v-for="object in objects"
          :key="object.id"
          class="w-full !h-auto !aspect-thumbnail my-auto"
          style="
            height: 200px;
            background-color: red;
            text-align: center;
            padding-top: 150px;
          "
        >
          <span>
            {{ object.id }}
          </span>
        </swiper-slide>
      </swiper-container>
    </ClientOnly>
    <div>current active index - {{ currentSlideIndex }}</div>
  </div>
</template>

<script lang="ts" setup>
  const objects = ref([
    {
      id: 1,
    },
    {
      id: 2,
    },
    {
      id: 3,
    },
    {
      id: 4,
    },
    {
      id: 5,
    },
  ]);
  const swiperRef = ref(null);
  const swiper = useSwiper(swiperRef);

  const currentSlideIndex = ref(2);
  const onIndexChange = (e: any) => {
    console.log('index changed', e);
    currentSlideIndex.value = e;
  };

 onMounted(() => {
    nextTick(() => {
        if (swiperRef.value) {
 swiperRef.value.addEventListener('swiperactiveindexchange', onIndexChange);
}
     })
  })
</script>

<style>
  .container {
    width: 50%;
    margin: auto auto;
  }
</style>