[英]Create Nuxt.js list with async data & axios
I try to load data from Json to vue component using this tutorial:我尝试使用本教程将数据从 Json 加载到 vue 组件:
https://nuxtjs.org/guide/async-data/ https://nuxtjs.org/guide/async-data/
This is my code:这是我的代码:
<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
}
}
Tell me please, what's wrong?请告诉我,怎么了?
according to nuxtjs document根据nuxtjs文档
async asyncData ({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
in your case this should be在你的情况下,这应该是
async asyncData () {
let { data } = await axios.get(`http://jsonplaceholder/`)
return { posts: data } // Console: property post is not defined
}
Explaining more sid heart's reply: Function name is "asyncData" not async data.解释更多 sid heart 的回复:函数名称是“asyncData”而不是异步数据。 You are using async await you can use like this:您正在使用 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
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.