Проблема с наблюдателем пересечения в vue. js - PullRequest
Новая
       127

Проблема с наблюдателем пересечения в vue. js

4 голосов
/ 03 мая 2020

Это мой первый раз, когда я использую IntersectionObserver, и я следую за этим, сделайте c https://www.netguru.com/codestories/infinite-scroll-with-vue.js-and-intersection-observer. Но я заблокирован из-за этой ошибки 

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

это мой триггерный компонент 

<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>

Как я могу это исправить? (Спасибо)

1 Ответ

1 голос
/ 03 мая 2020

Вы изменили default из options с: 

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

на: 

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

Но если мы посмотрим на lib.dom.d.ts, вот интерфейс для Объект опций IntersectionObserver: 

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

Когда root равен null или undefined, IntersectionObserver по умолчанию используется для элемента области просмотра.

Так что измените его обратно на null, и он будет работать.

...