2016-12-27 15:57:50 +00:00
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="container">
|
|
|
|
<h1>{{ post.title }}</h1>
|
|
|
|
<pre>{{ post.body }}</pre>
|
2018-11-24 18:49:19 +00:00
|
|
|
<p>
|
|
|
|
<NuxtLink to="/posts">
|
|
|
|
Back to the list
|
|
|
|
</NuxtLink>
|
|
|
|
</p>
|
2016-12-27 15:57:50 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import axios from 'axios'
|
|
|
|
|
|
|
|
export default {
|
2017-10-31 13:43:55 +00:00
|
|
|
async asyncData({ params }) {
|
2016-12-27 15:57:50 +00:00
|
|
|
// We can use async/await ES6 feature
|
2018-08-08 10:54:05 +00:00
|
|
|
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
|
2016-12-27 15:57:50 +00:00
|
|
|
return { post: data }
|
|
|
|
},
|
2017-10-31 13:43:55 +00:00
|
|
|
head() {
|
2016-12-27 15:57:50 +00:00
|
|
|
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>
|