Nuxt plugin cannot access Vue's 'this' instance in function blocks

Question

So I have managed to inject hls.js to work with nuxtjs $root element and this

I did so doing it like this (hls.client.js):

import Hls from 'hls.js';

export default (context, inject) => {
  inject('myhls', Hls)
}

and nuxt.config.js

plugins: [
  '~plugins/hls.client.js',
],

This works great, literally :-) but I can't reference 'this' in the hls events.

playHls() {
      this.playing = true
      if(this.$myhls.isSupported()) {
        this.hls = new this.$myhls();
        this.audio = new Audio('');
        this.hls.attachMedia(this.audio);
        this.hls.loadSource(this.scr_arr[2]);
        this.audio.play()
        // 'THIS' DOES NOT WORK INSIDE this.hls.on
        this.hls.on(this.$myhls.Events.MEDIA_ATTACHED, function () {
          console.log(this.scr_arr[2]); // DOES NOT LOG
          console.log("ok")  // works great                  
        });
        // 'THIS' DOES NOT WORK INSIDE this.hls.on 
        this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {
          console.log('manifest loaded, found ' + data.levels.length + ' quality level') // WORKS
          console.log("ok") // WORKS
          this.audio.volume = 1   // DOES not work   
        });
      }
    },

So I in these Events I can't use nuxtjs 'this', cause there seems to be a different scope?

Can I somehow get 'this' nuxt scope inside these Events?

Isn't `this.hls.attachMedia` supposed to be `this.$myhls.attachMedia`? — kissu, Oct 28 '21 at 10:43
Also, if you want to use `this.audio.volume`, use an arrow function `() =>` rather than `function (event, data) {`. — kissu, Oct 28 '21 at 10:44
@kissu this.$myhls is just the Hls object. It has the public method isSupported(). I tried to inject new Hls() instead but this does not expose isSupported() at all. — mahatmanich, Oct 28 '21 at 11:05
@kissu about the usage of this.audio.volume your method works, great. Is it because of then it is not a callback function? — mahatmanich, Oct 28 '21 at 11:12
See there is a difference between getting the normal constructor and the Hls Object: `if(this.$myhls.isSupported()) { // Hls.isSupported()` `this.hls = new this.$myhls(); // <= new Hls()` I only injected 'Hls' not 'new Hls()' — mahatmanich, Oct 28 '21 at 11:15
In a block scope (`function() {` syntax), `this` is bind to the nested scope and not vue's `this` instance. If you want to keep `this` inside of a function, use an arrow function (ES6) or you can have `const that = this` and use `that` in a regular `function() {` if you prefer. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — kissu, Oct 28 '21 at 11:44
@kissu that was the issue :-) ah these pitfalls sometimes :-) Thanks a bunch, once again! — mahatmanich, Oct 28 '21 at 12:49

score 2 · Accepted Answer · answered Oct 28 '21 at 14:39

Replace your functions like

this.hls.on(this.$myhls.Events.MANIFEST_PARSED, function (event, data) {

into

this.hls.on(this.$myhls.Events.MANIFEST_PARSED, (event, data) => {

to keep the this context tied to the Vue app, otherwise it will be scoped to the context of the block scope.

Nuxt plugin cannot access Vue's 'this' instance in function blocks

1 Answers1

Linked