Vue.js - Access data variable from callback function

Question

I am using the Deezer Javascript SDK to play an audio track.

On their documentation there is a bunch of events defined such as player_loaded, player_paused, track_end, etc.

They also show how subscribe to an event:

// Callback function is called when the current player has resumed or started playing
DZ.Event.subscribe('player_play', function(evt_name){
    console.log("Player is playing");
});
 
// Callback function is called when the currently playing track has changed
DZ.Event.subscribe('current_track', function(track, evt_name){
    console.log("Currently playing track", track);
});
 
// Callback function is called when the volume level of the current player has changed
DZ.Event.subscribe('volume_changed', function(args, evt_name){
    console.log("The current volume level is " + args);
});

This works fine so far.

I was wondering if it is possible to access a variable from within the inner function:

DZ.Event.subscribe("track_end", function (evt_name) {
            console.log("event fired 1");
            //trying to access this bool var that is defined in data
            this.isDeezerPlaying = false;
});

This is not working. I would have to pass in this as a parameter to the callback function in order to access my local variable isDeezerPlaying. But it is not me calling this function and passing the parameters but it is the SDK who does that somewhere under the hud.

So is there still a way?

score 1 · Answer 1 · answered Oct 27 '20 at 10:26

1

try with below code:

const vm = this;
DZ.Event.subscribe("track_end", function (evt_name) {
   console.log("event fired 1");
   //trying to access this bool var that is defined in data
   vm.isDeezerPlaying = false;
});

answered Oct 27 '20 at 10:26

Jinal Somaiya

1,565
7
24

score 1 · Answer 2 · answered Oct 27 '20 at 10:27

Yes you can by using arrow functions :

DZ.Event.subscribe("track_end", (evt_name) => {
            console.log("event fired 1");
            this.isDeezerPlaying = false;
});

How does the "this" keyword work?

https://stackoverflow.com/a/24900924/5671919

score 1 · Accepted Answer · answered Oct 27 '20 at 10:30

Yes you can. You either use arrow functions

DZ.Event.subscribe("track_end", (evt_name) => {
            console.log("event fired 1");
            //trying to access this bool var that is defined in data
            this.isDeezerPlaying = false;
});

or you bind it:

DZ.Event.subscribe("track_end", function (evt_name) {
            console.log("event fired 1");
            //trying to access this bool var that is defined in data
            this.isDeezerPlaying = false;
}.bind(this));

Vue.js - Access data variable from callback function

3 Answers3