Question

我正在构建一个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")
  }

我不确定这是否是最佳选择-但目前来看效果很好-任何意见/建议都很棒！

Nuxt JS加载组件取决于API响应

0 个答案: