Загрузка компонентов Nuxt JS в зависимости от ответа API - PullRequest
Новая
       15

Загрузка компонентов Nuxt JS в зависимости от ответа API

0 голосов
/ 22 апреля 2019

Я создаю nuxt-приложение для использования wp rest API. В моем методе выборки я выбираю информацию о необходимых компонентах. Я не могу понять, как затем импортировать все компоненты и визуализировать их. Я пробовал несколько методов, но не вижу, как это работает.

Вот что работает: 

<component :is="test" :config="componentList[0]"></component><br>

export default {
  async fetch({ store, $axios }) {
    await store.dispatch("getPageBySlug", "home");
  },

  computed: {
    test() {
      return () => import('~/components/HeroIntro');
    }
  }
};

Хорошо, это легко, ничего особенного - теперь я могу импортировать компонент на основе слага и т. Д. Но мне нужно отрендерить несколько компонентов, и поэтому я делаю это: 

<component
      v-for="component in componentList"
      :key="component.acf_fc_layout"
      :is="component.acf_fc_layout"
      :config="component">
</component>

вместе с этим 

export default {
  async fetch({ store, $axios }) {
    await store.dispatch("getPageBySlug", "home");
  },

  computed: {
    page() {
      return this.$store.getters.getPageBySlug("home");
    },
    componentList() {
      return this.page.acf.flexible_content;
    },
    componentsToImport() {
      for(const component of this.componentList) {
        () => import('~/components' + component.acf_fc_layout);
      }
    }
  }
};

Все, что я получаю, это

Неизвестный пользовательский элемент: HeroIntro - вы зарегистрировали компонент правильно? Для рекурсивных компонентов убедитесь, что опция "имя"

Как мне архивировать то, что я пытаюсь?

редактирование:

Итак, после долгих попыток я мог заставить его работать только с использованием дополнительного компонента, «DynamicComponent»: 

<template>
  <component :is="componentFile" :config="config"></component>
</template>
<script>
export default{
  name: 'DynamicComponent',
    props: {
    componentName: String,
    config: Object
    },
    computed: {
        componentFile() {
            return () => import(`~/components/${this.componentName}.vue`);
        }
    }
}
</script>

Сейчас в Index.vue 

<template>
  <main class="container-fluid">

    <DynamicComponent
      v-for="(component, index) in componentList"
      :key="index"
      :componentName="component.name"
      :config="component"
    />

  </main>
</template>

<script>    
export default {
  components: {
    DynamicComponent: () => import("~/components/base/DynamicComponent")
  }

Я пока не уверен, что это оптимально - но пока это работает отлично - любой вклад / мнения будут великолепны!

...