vue-lazy-hydration icon indicating copy to clipboard operation
vue-lazy-hydration copied to clipboard

Failed to execute 'observe' on 'IntersectionObserver' when using nuxt-link with vue-glide

Open NicolasLoisirsEncheres opened this issue 4 years ago • 1 comments
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>

NicolasLoisirsEncheres avatar May 11 '21 09:05 NicolasLoisirsEncheres

Have same issue when using WnenVisible, WhenIdle works fine

IlyaShkurenko avatar May 20 '21 13:05 IlyaShkurenko