Question

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

这是我的代码：

crocks

请告诉我，怎么了？

Answer 1

您可以根据Nuxt asynData和context指南进行操作，即：

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

Answer 2

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

Answer 3

解释更多sid heart的回复：函数名称是“ asyncData”而不是异步数据。您正在使用异步等待，您可以像这样使用：

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

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

3 个答案: