Nuxt.js: Best Practices for Defining a Shared Method in the Mounted() Lifecycle Hook and Updating Component Data

Question

Nuxt.js: Best Practices for Defining a Shared Method in the Mounted() Lifecycle Hook and Updating Component Data

I am trying to detect the scroll event within the mounted () of my component and update the component's data accordingly.

・component

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

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

・utils/trackScroll.js

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

There are a couple of issues in this scenario:

1. The function is only triggered once during the initial scroll, but I want it to be executed every time there is a scroll event.
2. The value of this.scrollPosition within the component remains unchanged despite the scrolling.

How can these problems be resolved?

javascript vue.js nuxt.js

Answer 1

Answer №1

The initial problem should not occur. By adding an event listener, it will trigger each time you scroll. I have tested this locally and it functions as intended. However, make sure to pass a function to the event listener instead of an already executed one.

You can return a result from the function and implement it like so:

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

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

Check out this functioning example on CBS: https://codesandbox.io/s/0qjkoox68v

Answer 2

The initial problem should not occur. By adding an event listener, it will trigger each time you scroll. I have tested this locally and it functions as intended. However, make sure to pass a function to the event listener instead of an already executed one.

You can return a result from the function and implement it like so:

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

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

Check out this functioning example on CBS: https://codesandbox.io/s/0qjkoox68v

Nuxt.js: Best Practices for Defining a Shared Method in the Mounted() Lifecycle Hook and Updating Component Data

Answer №1

Similar questions

Retrieving Values Entered by Users in a Bootstrap Form

Having trouble connecting the controller variable in AngularJS to the HTML page

Transmitting data from Vue.js to an API endpoint

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

Issue with AJAX POST request, values not being passed to variables despite being displayed in the echo output

Having npm start is causing an error to be displayed

Select a division and retrieve the identification of a different division

showing sections that collapse next to each other

Connect CSS Transition to a click action

v-for loop to populate dropdown menu with identical values

What is the best way to deploy a user interface update to a JavaScript frontend?

Attach a click event listener to content loaded through AJAX using only JavaScript, without relying on jQuery

Encountering the error message "Unable to access the key property of an undefined object" within a Vue template

What steps should I take to generate a stylized date input in javascript?

Is there a way to effectively transfer cookie values from client-side services to server-side services in a React JS environment

CSS personalized by the user

Managing information retrieved from an asynchronous HTTP request

Guide on generating an instance of a component definition class within Angular 4

Activate Popover on Third Click with Bootstrap 4

For the past 8 hours, my main focus has been on successfully transmitting a basic JSON object containing data from an API from my Express backend to a React component