Question

我不想加载100个组件，而是根据API请求的响应动态地导入它们。我进行了API调用，并在给定的响应中获得了所需的所有模块的列表。例如：

[
    {
        type: 'SliderBlock',
        name: 'slider-block'
    },
    {
        type: 'QuotationBlock',
        name: 'quotation-block'
    },
    {
        type: 'ReferenceBlock',
        name: 'reference-block'
    }
]

现在，我知道我需要哪些组件，然后将其导入到我的页面（组件）中，但是似乎无法使其完全正常工作。直到我定义了组件为止，下面的代码才可以正常工作：

   export default {
        components: components,
        data() {
            return {
                components: loadComponents()
            }
        }
    }

这是我得到错误的地方：

[Vue警告]：未知的自定义元素：-您是否注册了组件正确吗？对于递归组件，请确保提供 “名称”选项。

当我在导出默认值之前使用console.log记录“ components”的值时，我会看到正确的组件列表，这些组件应该可以正常工作，并且与硬编码列表相同，即

{
    SliderBlock, QuoationBlock, ReferenceBlock
}

有人可以告诉我哪里出了问题以及如何使它正常工作吗？

我的 _。vue 文件显示在下面。

        <template v-if="components" v-for="(component, i) in components">
            <component :key="i" v-bind:is="component.name"></component>
        </template>

    </div>
</template>

<script>
    import axios from 'axios'

    let componentsList = []
    let components = {}

    /**
     * @internal This function will retrieve a list of needed components from the API
     * @returns {Promise<Array | never>}
     */
    function getList()
    {
        return axios.get('https://myapi/data.json').then(response => {

            response.data['response'].forEach(function (comp) {
                componentsList.push({
                    "type": comp.component.toString(),
                    "name": comp.slug.toString()
                });
            });

            return componentsList

        });
    }

    /**
     * @internal Import each needed component
     * @returns {Array}
     */
    function loadComponents()
    {
        getList().then(data => {
            data.map((component, index) => {
                import(`~/components/${component.type}.vue`).then(comp => {
                    components[index] = comp.default
                })
            });
        });

        return componentsList
    }


    export default {
        components: components,
        data() {
            return {
                components: loadComponents()
            }
        }
    }

</script>

NuxtJS根据API响应动态加载组件

0 个答案: