Javascript 使用异步数据创建Nuxt.js列表&；axios

我尝试使用本教程将数据从Json加载到vue组件：

这是我的代码：

<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
    }
  }

{{post.id}。{{post.title}

从“axios”导入axios；
导出默认值{
异步数据（）{
让{data}=wait axios.get(`http://jsonplaceholder/`)
返回{posts:data}//控制台：未定义属性post
}
}

---

请告诉我，怎么了？

根据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
}

---

根据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
}

---

解释更多sid heart的回答： 函数名为“asyncData”，而不是异步数据。您正在使用async Wait，您可以这样使用：

import axios from "axios";
export default {
  // Also define data function and define posts property
  data() {
    return {
      posts: {}
    }
  },

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

---

解释更多sid heart的回答： 函数名为“asyncData”，而不是异步数据。您正在使用async Wait，您可以这样使用：

import axios from "axios";
export default {
  // Also define data function and define posts property
  data() {
    return {
      posts: {}
    }
  },

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

---

您可以根据Nuxt和指南执行此操作，即：

export default {
  async asyncData(context) {
    let response = await context.app.$axios.$get(`http://jsonplaceholder/`)
    return { posts: response } 
  }
}

---

您可以根据Nuxt和指南执行此操作，即：

export default {
  async asyncData(context) {
    let response = await context.app.$axios.$get(`http://jsonplaceholder/`)
    return { posts: response } 
  }
}

---

它应该是

async async data

而不是

async data

。它应该是

async async data

而不是

async data

。