I am facing an issue with my parent component that dynamically loads an external js file (similar to what is explained here).
The child component needs a variable inside the js file, but it throws an error every time the page is loaded because the child component renders before the external js file is fully loaded. How can I prevent this from happening?
//in parent component
app = new Vue({
el: '#app',
created() {
this.loadJsFile('assets/js/extra.js')
},
methods: {
loadJsFile(src) {
var script = document.createElement('script');
script.src = src;
let head = document.getElementsByTagName('head')[0];
head.appendChild(script);
},
In extra.js:
var extra = { users:[{id:1, name:'foo'}], images:[...] }
Child component:
data() {
return {
users:[],
}
},
created(){
this.users = extra.users
},
causing the error:
[Vue warn]: Error in created hook: "ReferenceError: extra is not defined"