Interacting with data and functions in Vue using addEventListener

Question

Interacting with data and functions in Vue using addEventListener

I'm encountering difficulties connecting my data or methods using this code:

created() {
  document.addEventListener( 'touchstart', function( e ) {
    this.myData = e.changedTouches[ 0 ].screenY
  }
}

I presume the issue lies in the scope of the function, as .this doesn't seem to function within it. How can I possibly access my data or trigger any methods outside of the event listener function?

javascript vue.js

Answer 1

Answer №1

It's important to note that the issue arises due to the binding of this inside the callback function, which does not refer to the Vue instance.

To resolve this issue, you can create a variable var self = this in the created hook to explicitly point to the Vue instance. Then, you can access data properties using self within the callback function.

created() {
  var self = this;
  document.addEventListener('touchstart', function(e) {
    self.myData = e.changedTouches[0].screenY;
  })
}

By creating a closure over the self variable, the callback function will correctly reference the Vue instance when executed.

Alternatively, you can utilize arrow functions, which maintain lexical binding of this, like so:

created() {
  document.addEventListener('touchstart', (e) => {
    this.myData = e.changedTouches[0].screenY;
  })
}

Answer 2

It's important to note that the issue arises due to the binding of this inside the callback function, which does not refer to the Vue instance.

To resolve this issue, you can create a variable var self = this in the created hook to explicitly point to the Vue instance. Then, you can access data properties using self within the callback function.

created() {
  var self = this;
  document.addEventListener('touchstart', function(e) {
    self.myData = e.changedTouches[0].screenY;
  })
}

By creating a closure over the self variable, the callback function will correctly reference the Vue instance when executed.

Alternatively, you can utilize arrow functions, which maintain lexical binding of this, like so:

created() {
  document.addEventListener('touchstart', (e) => {
    this.myData = e.changedTouches[0].screenY;
  })
}

Interacting with data and functions in Vue using addEventListener

Answer №1

Similar questions

How can I extract the width of an uploaded image and verify it using JavaScript?

I need assistance with incorporating a datepicker feature using jQuery UI

Using custom elements within an iteration necessitates the use of 'v-bind:key' directives

What is the best method for animating a display table to none or reducing its height to

Incorporating Flash videos into an Angular HTML partial using AngularJS techniques

Implementing MUI createTheme within Next.js

The Strapi plugin seems to be encountering an issue as the API is not reachable, leading to a

Passing a form from Blade to Vue in order to utilize the checkValidity method in Vue/Laravel

The mobile device isn't compatible with Jquery's "read more" feature

The error message "TypeError: undefined is not a function when trying to access a resource

Guide to exporting several Chart.JS graphs to a PDF document with each graph on a separate page

Troubleshooting Google Chrome Extension: chrome.storage.sync.get malfunctioning

The createAsyncThunk function seems to be failing to trigger in the redux toolkit implementation

The styled-components in React are having trouble recognizing the HTML attribute 'autoplay' when used with a video tag

How can one achieve the equivalent of Flask Safe when making an ajax call?

What could be causing the $httpProvider.interceptors to unexpectedly return an 'undefined' value?

How to properly implement search functionality in a React table?

Ensure the md-sidenav remains open by default

Disable the second tab within an Angular md-tabs component

Using Vue/Nuxt.js to compute the cumulative sum of hierarchically structured JSON data