Question

我正在尝试在Vuejs中构建一个小型应用程序，那里的仪表板组件包含许多小部件，我想异步加载它们，所以我在test.js文件中创建了一个函数根据文档：

export default item => () => ({
    component: item,
    loading: require('./Components/Loading.vue'),
    error: require('./Components/Error.vue'),
    delay: 200,
    timeout: 3000
})

并在我的应用程序中将其导入：

import VueAsyncComponent from './test'
window.VueAsyncComponent = VueAsyncComponent

在我的dashboard组件中，我尝试过：

this.loading = true
axios.get('/api/page-components?slug=dashboard').then(response => {
    if(response.status === 200)
    {
        this.title = response.data.page.title
        if(response.data.page.content)
        {
            // This for reference of data pattern...
            const comp = {
                components: [
                    {name: 'PageHeader', location:'./../Layouts/PageHeader', 'data': {title: 'Dashboard'}},
                    {name: 'pageFooter', location:'./../Layouts/PageFooter', 'data': {title: 'Dashboard'}},
                    {name: 'leftAside', location:'./../Layouts/LeftAside', 'data': {title: 'Dashboard'}},
                ]
            }
            comp.components.forEach(function (val, index) {
                Vue.component(val.name, VueAsyncComponent(val.location))
            })
            this.loading = false
        }
        console.log(response.data)
    }
})

在HTML部分：

<template>
    <!-- begin:: Page -->
    <div v-if="loading" class="m-grid m-grid--hor m-grid--root m-page">
        <component v-bind:is="pageData[0].name"></component>
        <!-- begin::Body -->
        <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
            <component v-bind:is="pageData[1].name"></component>
            <div class="m-grid__item m-grid__item--fluid m-wrapper">
        </div>
        <component v-bind:is="pageData[2].name"></component>
    </div>
</template>

在通过webpack-> laravel-mix进行编译时，我没有出现任何错误，但是在渲染时却不显示组件，并且在控制台中也没有错误：

类似这样的事情。从axios呼叫得到响应后，如何呈现这些组件的任何想法。

在Vue.js中的axios调用响应后呈现异步组件

0 个答案: