The window event listener is failing to trigger

Initially, my window listener was working perfectly fine. However, at some point in time, it suddenly stopped functioning properly. The resize event also ceased to work. I am completely clueless as to why it is no longer operational.

  mounted () {
    window.addEventListener('scroll', this.test)
  },
  destroyed () {
    window.removeEventListener('scroll', this.test)
  },
  methods: {
    test () {
      console.log('test')
    }
  }

UPDATE

I attempted to create a listener within the main Vue app component, but unfortunately, it still does not seem to be working.

<template>
  <div id="application" class="" style="height: 200vh">
<!--    <router-view/>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    window.addEventListener('scroll', this.test);
  },
  methods: {
    test () {
      console.log('test')
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        document.title = this.$t(to.meta.title) || 'Some Default Title'
      }
    },
  }
}
</script>

UPDATE 2 Upon mounting the component, the function seems to be triggered twice by the event listener, neither more nor less. screenshot

Answer №1

FIX

The HTML tag was set to 100vh, causing the window not actually moving. However, the child element inside was still scrollable.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with $_POST['projectSubmit'] not functioning as expected

I'm having trouble with echoing a JavaScript script after hitting the submit button. Instead of working, it just closes the modal and refreshes the page. I tried using `if($_POST['projectSubmit'])` instead of enclosing it in `isset()`, but i ...

Error: The filter argument must be in object form

Currently I am in the process of developing a REST API with an endpoint for posting movies. The request body is expected to contain only the movie title, which needs to be validated for presence. Upon receiving the title, I need to fetch other movie detail ...

sending data from a servlet to ajax

Implementing a star-based voting system involves sending an ajax request to update the database through a servlet when a user casts their vote. This is the ajax code used: $.ajax({ type:'GET', contentType: "charset=utf- ...

Tips for invoking a specific function based on a value within a v-on callback

Here's my code snippet: <form @submit.prevent="buttonName === 'Create' ? createCountries : updateCountries"> ----- ---- </form> methods :{ createCountries(){ ---- }, updateCountries ...

Cross-Origin Resource Sharing problem encountered with the webservice thumbnail.ws

I am attempting to create an HTML page that generates a snapshot of a URL using the free webservice provided by thumbnail.ws. Below is my code snippet: var myurl = "http://api.thumbnail.ws/api/API_KEY/thumbnail/get?url=http://maps.google.com/?q=36.82 ...

What could be causing my SectionList to occasionally display only a single section?

I'm facing a problem with the SectionList component where it occasionally fails to display all sections, only rendering the first one. After some debugging, I may have found a solution, but I'm unsure why it resolves the issue. While my page con ...

Having trouble with jQuery functioning on mobile devices?

I'm experiencing an issue where this code works perfectly on my desktop, but not on my mobile device. I've tried using different browsers on my mobile, but the code still doesn't function. Any assistance would be greatly appreciated. var li ...

Retrieving the output of an asynchronous function within another function in JavaScript

I'm facing an issue with the Chrome API functions being asynchronous, making it difficult for me to get their return value. Here's a snippet of code that demonstrates my problem. I'm working with AngularJS. $scope.storageGet = function( ...

Kubernetes is incorrectly marking the cron job as completed instead of displaying errors, despite the presence of errors

I am currently working on a cron job that will retrieve an excel file from an SFTP server and upload the data into a MongoDB database. In the event that there are errors in the cron job, such as a failure in the SFTP connection due to credential issues or ...

Is it possible to style React components with CSS without needing to directly import CSS files into the component itself?

In search of new approaches, the task at hand revolves around discovering innovative ways to implement CSS styles on React components without the need for importing external CSS files directly into the component. One method I explored was using inline sty ...

Is there an issue with this code? HTML5 canvas

I am attempting to create a mesmerizing animation of a black hole simulation using the canvas element. My goal is to make objects exit the black hole if their distance from its center is greater than the black hole's radius, and to do so at variable s ...

What is the best way to have a component in React "wait" for state updates?

Currently, I am using React to develop a battleship game. One issue I encountered is when the component loads and I try to map the board array, React throws an error stating "cannot read property board of undefined". After some debugging with console loggi ...

Is it possible to include all visible content, even when scrolling, within the full page height?

My webpage contains content that exceeds the height of the window. I am looking for a way to retrieve the full height of my page using either jQuery or pure Javascript. Can anyone provide a solution? I have considered the following approach: $('body ...

"Integrating Angular templates with .NET for seamless Partial Postback functionality

I'm having difficulty getting Angular to work with partial postbacks in .Net. My issue is similar to this question: Re-initialize Angular bindings after partial postback The problem arises when switching between tabs - one containing an Angular app ...

Whenever the state of a React component is modified, it does not automatically trigger a re

Currently, I am utilizing the React Infinite Scroller library to display a list of posts. Interestingly, my load more results function seems to be triggered three times, resulting in the update occurring thrice (verified through console.log). For renderi ...

What is the process for incorporating elements into Particles.js within Nuxt 3?

Adding particles.js to my nuxt 3 project posed a challenge. I utilized https://github.com/Joepocalyptic/nuxt-particles, but unfortunately, whenever I added an element within <NuxtParticles>, the element did not show up. // app.vue <template> ...

Exploring the Art of Structuring Json Data Using jquery

After importing data from a csv file, I am trying to utilize it in a dependent dropdown feature using jquery. However, I am unsure if it is feasible to nest the received data with my current code implementation. CSV File Banco Tarjeta Cuotas Medio_Pag ...

Sending a Set from a Node.js backend to the front end using socket.io

Why is it that when sending data from a Node.js backend to the frontend using socket.io, a set object is being converted into an empty object? Could this issue be related to JSON limitations, a bug in socket.io, or possibly a bug in Node.js? On the fronte ...

The fade transition will only begin once I have clicked the toggle button to make the modal appear two times

Currently, I am attempting to launch a modal and wish to include a transition element that prompts the user to scroll in order to fade out: <v-bottom-sheet v-if="sheet"> <v-card> <v-card-title>Hello world</v-card- ...

Unable to authenticate client response using passportjs jwt

Looking to set up login using passport-JWT. able to successfully sign up and log in, with a token generated upon logging in and sent back to the client application. However, after the authentication request reaches the app post-login, it seems like nothin ...