Nuxtjs组件中的asyncData无法正常工作

vuejs2 Vue.js

神无

2020-03-24

我的nuxt.js项目有问题。我使用了异步组件,但是当它发布时,异步没有起作用。这是我的代码。

我在https://nuxtjs.org/api/中有查看文档,但是我不知道到底是什么问题

Test.vue(组件)

    <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上运行时,这是实际结果

    a

我尝试搜索过Google多次,但是没有期望的解决方案。请有人帮我。

感谢您的帮助。

第3224篇《Nuxtjs组件中的asyncData无法正常工作》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
勤奋的迷糊君 2021.02.26

请问楼主解决了吗?我也遇到了这个问题

asyncData只能在页面级使用,不能在组件内使用

Winter 2021.02.26

@Winter搞了半天用的位置不对.....  

只能在page下面的第一层页面组件上用

2021.07.13

@静是的

Winter 2021.07.13

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android