Nuxt/examples/async-data/pages/posts/_id.vue
pooya parsa e7cc2757c3 refactor: update eslint-config to 1.x
Co-authored-by: Alexander Lichter <manniL@gmx.net>
2019-07-10 15:15:49 +04:30

57 lines
850 B
Vue

<template>
<div class="container">
<h1>{{ post.title }}</h1>
<pre>{{ post.body }}</pre>
<p>
<NuxtLink to="/posts">
Back to the list
</NuxtLink>
</p>
</div>
</template>
<script>
import axios from 'axios'
export default {
async asyncData ({ params }) {
// We can use async/await ES6 feature
const { 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>