mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
Update async-data example
This commit is contained in:
parent
45f22a418a
commit
05a66e0cba
@ -6,10 +6,11 @@
|
||||
|
||||
`data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
|
||||
|
||||
The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you 2 ways, choose the one you're the most familiar with:
|
||||
The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you different ways, choose the one you're the most familiar with:
|
||||
|
||||
1. returning a `Promise`, Nuxt.js will wait for the promise to be resolved before rendering the Component
|
||||
2. Define a second argument which is a callback method to be called like this: `callback(err, data)`
|
||||
2. Using the async/await ES7 feature
|
||||
3. Define a second argument which is a callback method to be called like this: `callback(err, data)`
|
||||
|
||||
Example with returning a `Promise`:
|
||||
```js
|
||||
@ -23,6 +24,16 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
Example with using `async/await`:
|
||||
```js
|
||||
export default {
|
||||
async data ({ params }) {
|
||||
let { data } = axios.get(`https://my-api/posts/${params.id}`)
|
||||
return { title: data.title }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Example with using the `callback` argument:
|
||||
```js
|
||||
export default {
|
||||
|
@ -1,8 +1,9 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<h1>User Agent</h1>
|
||||
<p>{{ userAgent }}</p>
|
||||
<p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
|
||||
<p><nuxt-link to="/posts">Blog</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -20,10 +21,16 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 100px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
a {
|
||||
color: #41B883;
|
||||
}
|
||||
</style>
|
||||
|
@ -1,35 +0,0 @@
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p>{{ post.title }}!</p>
|
||||
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data ({ req }) {
|
||||
// We can return a Promise instead of calling the callback
|
||||
return axios.get('https://jsonplaceholder.typicode.com/posts/1')
|
||||
.then((res) => {
|
||||
return { post: res.data }
|
||||
})
|
||||
},
|
||||
head () {
|
||||
return {
|
||||
title: this.post.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
p {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
padding: 100px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
</style>
|
52
examples/async-data/pages/posts/_id.vue
Normal file
52
examples/async-data/pages/posts/_id.vue
Normal file
@ -0,0 +1,52 @@
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>{{ post.title }}</h1>
|
||||
<pre>{{ post.body }}</pre>
|
||||
<p><nuxt-link to="/posts">Back to the list</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
async data ({ params }) {
|
||||
// We can use async/await ES6 feature
|
||||
let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
|
||||
return { post: data }
|
||||
},
|
||||
head () {
|
||||
return {
|
||||
title: this.post.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
border: 1px #ddd solid;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
ul li a {
|
||||
color: gray;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
a {
|
||||
color: #41B883;
|
||||
}
|
||||
</style>
|
53
examples/async-data/pages/posts/index.vue
Normal file
53
examples/async-data/pages/posts/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1>Blog</h1>
|
||||
<ul>
|
||||
<li v-for="post in posts">
|
||||
<nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
|
||||
</li>
|
||||
</ul>
|
||||
<p><nuxt-link to="/">Back to home page</nuxt-link></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data ({ req, params }) {
|
||||
// We can return a Promise instead of calling the callback
|
||||
return axios.get('https://jsonplaceholder.typicode.com/posts')
|
||||
.then((res) => {
|
||||
return { posts: res.data.slice(0, 5) }
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
border: 1px #ddd solid;
|
||||
padding: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
ul li a {
|
||||
color: gray;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
}
|
||||
a {
|
||||
color: #41B883;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue
Block a user