Question

我对nuxt.js项目有疑问。我使用了异步组件，但是当它出现故障时，异步并不起作用。这是我的代码。

我在https://nuxtjs.org/api/查看了文档，但我不知道究竟是什么问题

Test.vue（component）

    <template>
        <div>
            {{ project }}
        </div>
    </template>

    <script>

    export default {
        data() {
            return {
                project : 'aaaa'
            }
        },
        asyncData() {
            return {
                project : 'bbbb'
            }
        }
    }

    </script>

这是index.vue（页面）

    <template>
        <test></test>
    </template>
    <script>

    import Test from '~/components/Test.vue'
    export default {
        components : {
            Test
        }
    }

    </script>

我的预期结果是

    bbbb

但是当在http://localhost:3000上运行时，这是实际结果

    aaaa

我尝试多次搜索Google，但我没有预期的解决方案。有人帮帮我。

感谢您的帮助。

Answer 1

components/文件夹必须仅包含＆＃34; pure＆＃34; Vue.js组件

所以你不能在里面使用asyncData。

阅读此常见问题解答：https://nuxtjs.org/faq/async-data-components#async-data-in-components-

components / Test.vue（component）

<template>
    <div>
        {{ project }}
    </div>
</template>

<script>
export default {
    props: ['project'] // to receive data from page/index.vue
}
</script>

pages / index.vue（page）

<template>
    <test :project="project"></test>
</template>

<script>
import Test from '~/components/Test.vue'
export default {
    components : {
        Test
    },
    asyncData() {
        return {
            project : 'bbbb'
        }
    }
}
</script>

Nuxtjs组件中的asyncData不起作用

1 个答案: