Vuetify и require.js: как показать динамический компонент? - PullRequest
Новая
       14

Vuetify и require.js: как показать динамический компонент?

0 голосов
/ 11 марта 2019

Я создаю компонент вкладки, который динамически загружает свои v-tab-item компоненты, учитывая массив объектов конфигурации, состоящий из tabName, id и tabContent, который является расположением ресурса для компонента. У меня успешно загружаются компоненты. Однако они фактически не инициализируются (или не запускают свои created() методы), пока я не переключу вкладки. Я просто получаю пустые вкладки с правильными ярлыками. При использовании инспектора DOM сначала отображается только <componentId></componentId>, а затем, когда я переключаю вкладки, эти теги заменяются всем содержимым компонента.

Как заставить инициализировать динамические компоненты сразу после их загрузки?

РЕДАКТИРОВАТЬ: я создал CodePen здесь:

https://codepen.io/sgarfio/project/editor/DKgQON

Но так как это мой первый CodePen, я еще не выяснил, как ссылаться на другие файлы в проекте (то есть, что нужно установить для tabContent, чтобы их мог загрузить файл require.js). Я вижу в консоли «Доступ запрещен», и звучит так, как будто он нашел файлы, но не имеет доступа к ним, что странно, потому что все файлы принадлежат одному и тому же проекту. Так что мой CodePen даже не работает так же хорошо, как мой настоящий проект. Но, возможно, это поможет кому-то понять, что я пытаюсь сделать.

Кроме того, покопавшись еще немного, я нашел это:

http://michaelnthiessen.com/force-re-render/

, который говорит, что я должен изменить ключ на компоненте, и это заставит компонент повторно выполнить рендеринг. Я также нашел это:

https://vuejs.org/v2/guide/components-dynamic-async.html

Это довольно хороший пример того, что я пытаюсь сделать, но это не заставляет асинхронный компонент инициализировать . Это то, что мне нужно для асинхронных компонентов - они не инициализируются, пока я не переключаю вкладки. На самом деле они даже не отображаются в сетевых звонках. Vue просто создает для них заполнитель.

1 Ответ

0 голосов
/ 13 марта 2019

Я получил это работает!Я закончил тем, что отправил событие из кода, который загружает асинхронные компоненты, чтобы указать, что этот компонент был загружен.Слушатель этого события ведет подсчет количества загруженных компонентов (он уже знает, сколько их должно быть), и как только он получает правильное количество этих событий, он меняет значение this.active (v-model значение для компонента v-tabs, которое указывает, какая вкладка активна в данный момент) до "0".Я попробовал это, потому что, как я уже отмечал ранее, асинхронные компоненты загружались / отображались всякий раз, когда я переключал вкладки.У меня также есть кнопки prev / next для установки this.active, и сегодня я заметил, что если бы я использовал кнопку «next» вместо нажатия на вкладку, она загружала бы асинхронные компоненты, но не продвигала вкладку.Я уже выяснил, как генерировать событие из кода загрузки, поэтому все, что мне нужно было сделать в этот момент, это зафиксировать количество загруженных компонентов и затем манипулировать this.active.

. Я мог бы попытаться обновить мойCodePen, чтобы отразить это, и если я сделаю это, я вернусь и прокомментирую соответственно.На данный момент, вот пример того, что я закончил.Я все еще добавляю вещи, чтобы сделать его более надежным (например, в случае, если объект конфигурации содержит URL-адрес несуществующего компонента), но это его основной смысл. 

created: function() {
  this.$on("componentLoaded", () => {
    this.numTabsInitialized++;
    if(this.numTabsInitialized == this.numTabs) {
      // All tabs loaded; update active to force them to load
      this.active = "0";
    }
  })
},
methods: {
  loadComponent: function(config) {
    var id = config.id;
    var compPath = config.tabContent;
    var self = this;
    require([compPath], function(comp) {
      Vue.component(id, comp);
      self.$emit("componentLoaded");
    });
  }
}
...