Nuxt.js：如何定义组件的mount（）中使用的通用方法，以及如何更改组件的数据

Question

I want to detect the scroll event in the mounted () of the component as follows, and change the data used in the component.

・component

<script>
import checkScroll from '~/utils/checkScroll'

export default {
  ...
  data() {
    return {
      scrollPosition: 0
    }
  },
  mounted() {
    window.addEventListener(
      'scroll',
      checkScroll(this.scrollPosition, window.scrollY)
    )
  },
</script>

・utils/checkScroll.js

export default function checkScroll(scrollPosition, scrollY) {
  scrollPosition = scrollY
}

There are two issues in this case

1. I want to execute this function each time I scroll, but the function is executed only at the first scroll
2.The value of this.scrollPosition inside component does not change.

If this is the case, how will it work?

Answer 1

The first issue shouldn`t happen. if u add eventListener it will be executed every time you scroll and i have checked locally it works as expected. But you should pass a function to event listener, but you are passing already executed function.

You could return result from it and do something like this

export default function checkScroll(event) {
  return window.scrollY;
}

mounted() {
    window.addEventListener("scroll", event => {
      this.scrollPosition = checkScroll(event);
    });
  }

Here CBS with working example https://codesandbox.io/s/0qjkoox68v