Блог

Я создаю приложение 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');
    }
  }
};
  

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

 <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")
  }
  

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