vue-lazy-hydration
vue-lazy-hydration copied to clipboard
Failed to execute 'observe' on 'IntersectionObserver' when using nuxt-link with vue-glide
trafficstars
I've got an error when using nuxt-link : Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
I'm looking this issue on : https://github.com/maoberlehner/vue-lazy-hydration/issues/19 and trying to use v-slot={ hydrated } v-if="hydrated" it but doesn't work.
I have this error only when using nuxt-link or back history, not when refreshing the page or using <a> element
I'm using Nuxt 2.14.5 vue-glide-js 1.3.14 and vue-lazy-hydration 2.0.0-alpha.0
The code :
<template>
<div class="card-list-item-inner">
<template v-if="device === 'mobile'">
<LazyHydrate when-visible>
<vue-glide
:per-view="1.5"
:bound="true"
>
<vue-glide-slide
v-for="(card, index) in data"
:key="`card-item-${index}`"
>
<component
:is="card.type"
:img-props="card.img"
>
<template #content>
<card-content :data="card"></card-content>
</template>
</component>
</vue-glide-slide>
</vue-glide>
</LazyHydrate>
</template>
<template v-else>
<template v-if="data.length > 3">
<LazyHydrate when-visible>
<vue-glide
:per-view="3"
:bound="true"
>
<vue-glide-slide
v-for="(card, index) in data"
:key="`card-item-${index}`"
>
<component
:is="card.type"
:img-props="card.img"
>
<template #content>
<card-content :data="card"></card-content>
</template>
</component>
</vue-glide-slide>
</vue-glide>
</LazyHydrate>
</template>
<div v-else class="row">
<div
v-for="(card, index) in data"
:key="`card-item-${index}`"
class="col-4"
>
<component
:is="card.type"
:img-props="card.img"
>
<template #content>
<card-content :data="card"></card-content>
</template>
</component>
</div>
</div>
</template>
</div>
</template>
Have same issue when using WnenVisible, WhenIdle works fine