Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

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

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?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!