How to bind to Highcharts constructor/listen to Cu

Question

This map exists inside of a Vue component and what I'm trying to do is use

this.$emit('somethingHappened', HighmapsEventObject)

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 

          in here 

        }
      } 
    }]
  })
}

as in

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 

          `this.$emit('somethingHappened', HighmapsEventObject)`

        }
      } 
    }]
  })
}

But obviously, this at this point, references the Highmap's this not the Vue component's this

so I've tried to do something like this:

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 

          this.$emit('somethingHappened', e)

        }
      } 
    }]
  }).bind(this)
}

But I get:

... default.a.mapChart(...).bind is not a function

and I can't figure out how to pass the Vue component's this to the highmaps constructor and Vue doesn't naturally listen to CustomEvents so I can't figure out how to dispatch the event in that callback so that Vue is aware that it happened.

mounted () {
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: (e) => { 
          let event = new CustomEvent('mapclicked', {
            detail: e
          })
          e.target.dispatch(event)
        }
      } 
    }]
  })
}

So my question, at long last, is how do I either a: listen for CustomEvents in Vue, or b: bind Vue's this to a Highmaps constructor?

Thanks SO

Answer 1

3 options as far as i can see, you can use the infamous "that" variable

mounted () {
  const that = this;
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
          that.$emit('somethingHappened', HighmapsEventObject)
        }
      } 
    }]
  })
}

you can create a function directly:

mounted () {
  const something = (HighmapsEventObject) => { this.$emit('somethingHappened', HighmapsEventObject); };
  Highcharts.mapChart(this.$el, { 
    series: [{ 
      events: {
        click: () => { 
           something(HighmapsEventObject);
        }
      } 
    }]
  })
}

Or you can use an event bus https://alligator.io/vuejs/global-event-bus/ but that sounds like an overkill.

Finally you can try (if you aren't already) the highchart vue plugin: https://github.com/weizhenye/vue-highcharts