javascript - Callback function returning an undefined object inside vue component

Question

I have a map object that is within the context of my vue component. When the map is ready I need to asynchronously load a script from a third-party library. I appended it in the head of my .html file, no problem. The issue arises when it tries to execute the callback function. It returns 'AVUXI is undefined' which should be in a global context but the map object being passed to it is within my component.

This is the script which I load from within my component when the map is initialized:

let sc = document.createElement('script');
      sc.id = 'vxscript';
      sc.type = 'text/javascript';
      sc.async = 'async';
      sc.src = 'https://m.avuxicdn.com/v3/s/{APIkey}/en?callback=avapil';
      document.head.appendChild(sc);

This is the callback function which is inside my component:

avapil() {
      AVUXI.MapStart('mymap', {APIkey});
}

I tried putting the callback function in the head of .html but apparently it will not work because my map is in my local component. What would be the best way to approach this?

Thanks!

question from:https://stackoverflow.com/questions/65928408/callback-function-returning-an-undefined-object-inside-vue-component

Answer 1

3rd party libraries need to play nicely with many different frameworks, so a simple, global callback is the best option.

One simple solution would be to do a window.avapil = this.avapil somewhere in the initialization of your component. Obviously this only works if your component is present and initialized when the callback is supposed to be invoked. Reset this after successful invocation to avoid unwanted side effects.