-
-
Notifications
You must be signed in to change notification settings - Fork 12
Closed as not planned
Description
I need the data placed inside Swiper to be rendered on the server.
So I didn't wrapped <Swiper>
instance with <client-only>
tag,
Everything works just fine, but then I went outside the page there component is placed, and then returned to it, I've got an error and a warning.
<Swiper
v-if="props?.data?.type === 'slider'"
:modules="[SwiperAutoplay, SwiperNavigation, SwiperFreeMode]"
:slides-per-view="1"
:space-between="32"
:loop="true"
:navigation="true"
:autoplay="{
delay: 2500,
disableOnInteraction: true
}"
:style="{
'--swiper-navigation-color': '#fff',
'--swiper-pagination-color': '#fff'
}"
>
<SwiperSlide
v-for="(slide, index) in slides"
:key="'slide-' + index"
>
<div class="slider__item">
<lazy-nuxt-img
:key="'slider-' + index"
:src="
useStrapiMedia(
slide.attributes?.formats?.medium?.url ?? slide.attributes?.url
)
"
:alt="slide?.attributes?.alternativeText"
class="slider__image h-full lg:min-h-[540px] max-h-[600px] w-full fit-cover object-cover rounded-2xl aspect-1/1 transition-transform hover:scale-95"
@click="openLightbox(index)"
/>
</div>
</SwiperSlide>
</Swiper>
Vue warn:
Unhandled error during execution of beforeUnmount hook at Swiper
Error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'removeEventListener')
That error occured only then using routing.
I tracked it into the source file and found out what cause whose errors:
const domMethod = method === "on" ? "addEventListener" : "removeEventListener";
const swiperMethod = method;
el[domMethod]("pointerdown", swiper.onTouchStart, {
passive: false
});
How can I fix it?
Metadata
Metadata
Assignees
Labels
No labels