Update a data value from a method called in mounted

Question

I have this code and the goal from it is to update a data sticky to true if the scroll position is > than 0

export default {
  components: {
  },
  data() {
    return {
      menuVisible: false,
      sticky: false,
    }
  },
  mounted() {
    this.checkScroll()
  },
  methods: {
    checkScroll() {
      document.querySelector('body').onscroll = function() {
        console.log(window.pageYOffset > 0)
        this.sticky = window.pageYOffset > 0
      }
    },
  },
}

the problem is that even that i see the true console logged, the data is allways false ( as the initial value )

Any idea why is not updating it?

you could put the jquery outside of the vue code and just make this.sticky a global var — hurnhu, Dec 04 '19 at 16:26
@hurnhu there is no jQuery here, and making `sticky` a global variable is not the appropriate solution. — Matt U, Dec 04 '19 at 16:27

Craig Harshbarger · Accepted Answer · 2019-12-04T17:22:03.653

That's because of the callback you're passing into your scroll listener. In your callback this is not the context of the vue component. I think its the body actually. You'll need to use an arrow function or pass the vue instance into the callback as an argument. Arrow function is easiest. An arrow function retains the context where it was defined rather than inheriting the context of the object that calls it. Here is a good post/answer about the difference between normal and arrow functions.

document.querySelector('body').onscroll = () => {
    console.log(window.pageYOffset > 0)
    this.sticky = window.pageYOffset > 0
}

Update a data value from a method called in mounted

1 Answers1