Recently, I started using IntersectionObserver for the first time and I found a helpful guide at . However, I encountered an error that is causing me some trouble.
[Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Document)'"
Here is the code snippet of 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>
I would appreciate any help on fixing this issue. Thank you!