使用異步數據和 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

您可以基於 Nuxt asyncData和上下文指南來執行此操作，即：

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”而不是異步數據。 您正在使用 async await 您可以像這樣使用：

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