0

I was trying to add a class to Header after some scrolling so I added an IntersectionObserver to Header component:

export default {
  
  data() {
    return {
      test: false
    }
  },
  mounted () {
    const observer = new IntersectionObserver(
      function(entries, observer) {
        entries.forEach(entry => {
          console.log(entry)
          this.test = true
        })
      });
    observer.observe(this.$refs['header']);
  }
}

Somehow it is not working, because test variable won't change. Console.log executes properly every time, so I believe it is some reactivity problem? Maybe I created IntersectionObserver in a wrong place? I was messing a bit with this.$nextTick() and this.$set, but none of them helped. Cheers

Oskar Nawara
  • 49
  • 9
  • can you try to wrap it on " this.$nextTick(() => { const observer ... })" – pinoyCoder Aug 13 '20 at 13:02
  • I did now, but it didn't work unfortunately – Oskar Nawara Aug 13 '20 at 13:07
  • instead of new IntersectionObserver(function(entries, observer) {}) do "new IntersectionObserver( (entries, observer) => {})" – pinoyCoder Aug 13 '20 at 13:10
  • This actually worked, ...but it fires only once, on page load. if I change `test` to number, and do `this.test++` inside `forEach` function it doesn't work more than once – Oskar Nawara Aug 13 '20 at 13:21
  • You need to set the options which is your target and threshold please read the API here https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API – pinoyCoder Aug 14 '20 at 03:33

0 Answers0