Problem with Intersection Observer in vue.js

Question

It's my first time that i use IntersectionObserver and i followed this doc https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer . But I'm blocked because of this error

[Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Document)'"

this is my trigger component

<template>
  <span ref='trigger'></span>
</template>

<script>
export default {
  props:{
    options:{
      type: Object,
      default: () => ({
        root: 0,
        threshold: "0",
      })
    }
  },
  data(){
    return{
      observer : null
    }
  },
  mounted(){
    this.observer = new IntersectionObserver( entries => {
      this.handleIntersect(entries[0]);
    }, this.options);

    this.observer.observe(this.$refs.trigger);
  },
  destroyed(){
    this.observer.disconnect();
  },
  methods:{
    handleIntersect(entry){
      if (entry.isIntersecting) this.$emit("triggerIntersected");
    }
  }
}
</script>

How can i fix this?(thanks)

Have you tried this in the created lifecycle method as opposed to mounted? — Michael
– Michael, Commented May 3, 2020 at 17:02
it seems that your IntersectionObserver is not defined or not imported properly. — Prabhat Gupta
– Prabhat Gupta, Commented May 3, 2020 at 17:16

tao · Accepted Answer · 2020-05-03 17:41:05Z

1

You've changed the default of options from:

default: () => {
  return {
    root: null,
    threshold: "0"
  };
}

to:

default: () => ({
  root: 0,
  threshold: "0"
})

But if we look into lib.dom.d.ts, here's the interface for IntersectionObserver options object:

interface IntersectionObserverInit {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}

When root is null or undefined, the IntersectionObserver defaults to the viewport element.

So change it back to null and it will work.

edited May 3, 2020 at 17:41

answered May 3, 2020 at 17:24

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tao Over a year ago

You're trying to iterate through a response of a promise as if it was an array, but it's undefined. I need more info to tell you more. Could you please create a minimal reproducible example? I suggest codesandbox.io. Btw, in case you missed it, the author of that article linked a demo which you could get inspiration from.

Collectives™ on Stack Overflow

Problem with Intersection Observer in vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related