In Vue js, the keydown listener does not have access to methods and data values

Question

In Vue js, the keydown listener does not have access to methods and data values

In the mounted function of my code, I have this:

 mounted () {
    document.addEventListener('keydown', function (e) {
      switch (e.keyCode) {
        case 37 :
          alert(this.indexPictures)
          break
      }
    })
  }

In my data value:

  data: function () {
    return {
      indexPictures: this.index,
    }
  },

The result I am getting is undefined.

I am facing an issue where I can't retrieve the value in the data function and the same problem occurs when attempting to access methods. The result I get is 'is not a function'.

Do you have any thoughts on what could be causing this?

javascript vue.js

Answer 1

Answer №1

Uncertain about the purpose of this.index, but assuming it is a prop or something similar.

Try eliminating the use of the keyword function from the addEventListener.

 mounted () {
    document.addEventListener('keydown', (e)=> {
      switch (e.keyCode) {
        case 37 :
          alert(this.indexPictures)
          break
      }
    })
  }

While not directly related to the issue, also remove the function keyword from data:

data() {
    return {
      indexPictures: this.index,
    }
  },

The presence of the function keyword alters the scope, causing this to be bound to the function itself (in your scenario, the callback). When using an arrow function, the this keyword corresponds to that in mounted, allowing access to your data.

As per MDN documents:

Arrow functions provide significant advantages, particularly with methods like setTimeout() and EventTarget.prototype.addEventListener(), which typically necessitate closure, call, apply, or bind for ensuring proper execution within the correct scope.

Remember, if this is a component segment, consider removing the listener before component destruction.

Answer 2

Uncertain about the purpose of this.index, but assuming it is a prop or something similar.

Try eliminating the use of the keyword function from the addEventListener.

 mounted () {
    document.addEventListener('keydown', (e)=> {
      switch (e.keyCode) {
        case 37 :
          alert(this.indexPictures)
          break
      }
    })
  }

While not directly related to the issue, also remove the function keyword from data:

data() {
    return {
      indexPictures: this.index,
    }
  },

The presence of the function keyword alters the scope, causing this to be bound to the function itself (in your scenario, the callback). When using an arrow function, the this keyword corresponds to that in mounted, allowing access to your data.

As per MDN documents:

Arrow functions provide significant advantages, particularly with methods like setTimeout() and EventTarget.prototype.addEventListener(), which typically necessitate closure, call, apply, or bind for ensuring proper execution within the correct scope.

Remember, if this is a component segment, consider removing the listener before component destruction.

In Vue js, the keydown listener does not have access to methods and data values

Answer №1

Similar questions

How should one properly import esm/dist modules in React/javascript?

JavaScript popup cannot be shown at this time

Fade in only a single element from a specific class using Jquery

Differences between AngularJS template and templateURL when used in directives

Displaying inner words in an array vertically using Vue JS

Tips for preparing data prior to downloading it as a CSV file

Tips for moving an input bar aside to make room for another

Bring in TypeScript property from an external scope into the current scope

Error thrown by loader.js at line 582 of internal/modules/cjs/loader.js

Retrieve information from a mysql database and incorporate it into a javascript program

The tooltip element positioned absolutely is being cut off by a container with overflow set to auto

Tips for effectively utilizing "Session" in jQuery

Utilizing Mongoose Schema across various endpoints in an Express application

Only retrieve links that don't have the specified class by using regular expressions

What steps can be taken to rectify the issue with the table during the export to

Preventing loss of context in jQuery ajax when mixing HTML/JS and opening a <script> tag

What is the reason for the Web worker creating a new Class Instance every time a module is imported?

Scrollmagic - Creating dynamic effects by animating body and div backgrounds using multiple tweens

Can we trust the accuracy of Function.prototype.toString for our needs?

What is the best way to transfer text from a paragraph element to an input field without triggering a page refresh?