Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NicolasLoisirsEncheres opened this issue May 11, 2021 · 1 comment

Comments

@NicolasLoisirsEncheres
Copy link

NicolasLoisirsEncheres commented May 11, 2021

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 : #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>
@IlyaShkurenko
Copy link

IlyaShkurenko commented May 20, 2021

Have same issue when using WnenVisible, WhenIdle works fine

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants