Nuxt/examples/async-data/pages/posts/index.vue

63 lines
1.0 KiB
Vue
Raw Normal View History

2016-12-27 15:57:50 +00:00
<template>
<div class="container">
<h1>Blog</h1>
<ul>
2017-11-26 13:40:57 +00:00
<li v-for="(post, index) in posts" :key="index">
<NuxtLink :to="{ name: 'posts-id', params: { id: post.id } }">
{{ post.title }}
</NuxtLink>
2016-12-27 15:57:50 +00:00
</li>
</ul>
<p>
<NuxtLink to="/">
Back to home page
</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
asyncData({ req, params }) {
2016-12-27 15:57:50 +00:00
// We can return a Promise instead of calling the callback
return axios.get('https://jsonplaceholder.typicode.com/posts')
2017-10-31 13:43:55 +00:00
.then((res) => {
return { posts: res.data.slice(0, 5) }
})
2017-08-03 08:47:19 +00:00
},
head: {
title: 'List of posts'
2016-12-27 15:57:50 +00:00
}
}
</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>