使用异步数据和axios创建Nuxt.js列表

Question

我尝试使用本教程将数据从Json加载到vue组件： https://nuxtjs.org/guide/async-data/

这是我的代码：

<li class="item" v-for="post in posts"  v-bind:key="post.id">
  <nuxt-link :to="....">
   {{post.id}}. {{post.title}}
  </nuxt-link>
</li>

import axios from "axios";
export default {
    async data () {
      let { data } = await axios.get(`http://jsonplaceholder/`)
      return { posts: data } // Console: property post is not defined
    }
  }

请告诉我，有什么不对？

Answer 1

根据nuxtjs文件

  async asyncData ({ params }) {
    let { data } = await axios.get(`https://my-api/posts/${params.id}`)
    return { title: data.title }
  }

在你的情况下，这应该是

async asyncData () {
    let { data } = await axios.get(`http://jsonplaceholder/`)
    return { posts: data } // Console: property post is not defined
}