Блог

У меня есть родительский компонент, который динамически загружает внешний js-файл (как описано здесь).

и дочерний компонент принимает переменную внутри js-файла. но каждый раз, когда я загружаю страницу, дочерний компонент выдает ошибку, потому что дочерний компонент визуализировался до загрузки внешнего js-файла. Как я могу избежать этого?

       //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);
            },
  

в extra.js:

 var extra = { users:[{id:1, name:'foo'}], images:[...] }
  

дочерний компонент:

   data() {
    return {
        users:[],
     }
},

created(){
     this.users = extra.users
   },
  

причина ошибки:

  [Vue warn]: Error in created hook: "ReferenceError: extra is not defined"
  

В вашем случае есть несколько вариантов:

1. Вставьте <script> тег программно

родительский компонент:

 <ChildComponent :extra="users"></ChildComponent>

...
mounted() {
  this.loadJsFile('assets/js/extra.js').then(() => {
    if (window.extra) {
      this.users = extra.users
    }
  })
}

// ...

loadJsFile(src) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script');
    script.onload = () => {
      resolve();
    };
    script.onerror = () => {
      reject();
    };
    script.src = src;

    let head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
  });
}
  

дочерний компонент:

 ...
   props: {
      extra: Array
    },
   data() {
    return {
        users:[],
     }
   },
   created(){
     this.users = this.extra.users
   },
  

2. Добавьте <script> тег в index.html файл:

Просто добавьте <script src="static/js/extra.js"></script> в конец index.html файла, и тогда вы сможете получить доступ к extra переменной глобально.