What is the best way to remove an event binding before navigating to a different page in NUXTjs?

Question

What is the best way to remove an event binding before navigating to a different page in NUXTjs?

I wrote this code all on one page and it works perfectly. However, I am unsure how to unbind this event when transitioning to another page.

 private mounted () {
      if (process.browser) {
        const banner:any = document.querySelector('.banner img')
        document.addEventListener('scroll', () => {
          const offsetTop = window.scrollY
          const INTOR_HEIGHT = document.querySelector('.intro-text').offsetHeight
          if (offsetTop < INTOR_HEIGHT) {
            banner.style.top = offsetTop + 'px'
          }
        })
      }
    }

Whenever I navigate to a different page from this one, an error is thrown:

javascript Uncaught TypeError: Cannot read property 'offsetHeight' of null at HTMLDocument.eval

javascript vue.js nuxt.js

Answer 1

Answer №1

hehe, With VUE.js Instance Lifecycle Hooks in nuxt.js, you can achieve some cool effects like this:

private smoothSlider () {
      const bannerElement:any = document.querySelector('.banner img')
      const scrollOffset = window.scrollY
      const introHeight:any = document.querySelector('.intro-text').offsetHeight
      if (scrollOffset < introHeight) {
        bannerElement.style.top = scrollOffset + 'px'
      }
    }

private mounted () {
      if (process.browser) {
        document.addEventListener('scroll', this.smoothSlider)
      }
    }

private beforeDestroy () {
      document.removeEventListener('scroll', this.smoothSlider)
    }

The key is to bind a global event in the mounted hook and unbind it in the beforeDestroy hook.

Answer 2

hehe, With VUE.js Instance Lifecycle Hooks in nuxt.js, you can achieve some cool effects like this:

private smoothSlider () {
      const bannerElement:any = document.querySelector('.banner img')
      const scrollOffset = window.scrollY
      const introHeight:any = document.querySelector('.intro-text').offsetHeight
      if (scrollOffset < introHeight) {
        bannerElement.style.top = scrollOffset + 'px'
      }
    }

private mounted () {
      if (process.browser) {
        document.addEventListener('scroll', this.smoothSlider)
      }
    }

private beforeDestroy () {
      document.removeEventListener('scroll', this.smoothSlider)
    }

The key is to bind a global event in the mounted hook and unbind it in the beforeDestroy hook.

What is the best way to remove an event binding before navigating to a different page in NUXTjs?

Answer №1

Similar questions

Adding an item to a collection using NgRx

Can someone explain the significance of '{}' within the function shown below?

Implementing a try-catch-finally block in Javascript to handle errors during JSON parsing appears to be ineffective

What is the proper way to set up state with localStorage in Nuxt.js when using Universal Rendering?

Can a Unicode character be overwritten using a specific method?

How can I incorporate eventData when using .bind() for the "keydown" event type?

Utilizing AJAX POST requests from JavaScript to a Rails 4 controller while implementing Strong Parameters

What is the process of specifying that an Angular directive must act as a child directive within a particular directive in Angular?

Issue with Vue 3: Button components fail to update upon modification of second dropdown menu

The list countdown for loop only appears in the initial iteration

The pre tag does not have any effect when added after the onload event

Fixing the version mismatch error when attempting to create a Vue project

Having trouble getting the form to submit with jQuery's submitHandler

Extract and loop through JSON data containing various headers

Using Vue.js to transmit information within the same component

How can you locate the position of a selector within a parent or set using jQuery

6 Steps to Extract Data from a POST Request Using JavaScript

Is there a simple method to submit to a URL without relying on ajax?

Material UI filterSelectedOptions not functioning properly on initial search with multiple autocomplete

Retrieve the Latest Information from the Asp.Table