javascript - Nuxt。属性或方法 "posts"未在实例上定义但在渲染期间被引用

Question

我在这个项目中使用 Nuxt js。我在这里使用该功能 asyncData 在服务器端获取数据。这就是为什么我不能将数据设置为“数据”，因为所有数据都是在服务器上获取的。但是我在控制台中遇到错误“属性或方法“posts”未在实例上定义但在渲染期间被引用...”。

<template>
    <div>
        <v-list v-for="item in posts">
            <v-list-tile :key="item.id">
                <v-list-tile-content>
                    <h1>{{item.title}}</h1>
                </v-list-tile-content>
            </v-list-tile>
        </v-list>
    </div>
</template>

export default {
        asyncData() {
return axios.get('https://jsonplaceholder.typicode.com/posts')
                .then(response => {
                    return {posts: response.data}
                })
        }
    }

由于文档，https://nuxtjs.org/guide/async-data我只需要使用“帖子”

Answer 1

asyncData() 方法仅适用于 pages .

来自官方的 nuxt.js 文档:

更新: Async data in components

1. 使用 Nuxt 2.12 及更高版本中可用的新获取 Hook 。
2. 在挂载的 Hook 中调用 API 并在加载时设置数据属性。缺点:不适用于服务器端呈现。
3. 在页面组件的 asyncData 方法中调用 API，并将数据作为 props 传递给子组件。服务器渲染将正常工作。缺点:页面的 asyncData 可能不太可读，因为它正在加载其他组件的数据。