Nuxt/examples/routes-transitions/pages/users.vue

77 lines
1.7 KiB
Vue
Raw Normal View History

2016-12-20 12:29:22 +00:00
<template>
2017-07-09 10:23:03 +00:00
<div class="container">
2016-12-20 12:29:22 +00:00
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">&lt; Prev</nuxt-link>
<a v-else class="disabled">&lt; Prev</a>
<span>{{ page }}/{{ totalPages }}</span>
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next &gt;</nuxt-link>
<a v-else class="disabled">Next &gt;</a>
<ul>
2017-11-26 13:40:57 +00:00
<li v-for="user in users" :key="user.id">
<img :src="user.avatar" class="avatar">
2016-12-20 12:29:22 +00:00
<span>{{ user.first_name }} {{ user.last_name }}</span>
</li>
</ul>
<p><nuxt-link to="/">Back home</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
2018-01-19 00:13:18 +00:00
// Watch for $route.query.page to call Component methods (asyncData, fetch, validate, layout, etc.)
watchQuery: ['page'],
// Key for <nuxt-child> (transitions)
key: to => to.fullPath,
2018-01-19 00:13:18 +00:00
// Called to know which transition to apply
2017-10-31 13:43:55 +00:00
transition(to, from) {
2016-12-20 12:29:22 +00:00
if (!from) return 'slide-left'
return +to.query.page < +from.query.page ? 'slide-right' : 'slide-left'
},
2017-10-31 13:43:55 +00:00
async asyncData({ query }) {
2016-12-20 12:29:22 +00:00
const page = +query.page || 1
2017-07-09 10:23:03 +00:00
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
return {
page: +data.page,
totalPages: data.total_pages,
users: data.data
}
2016-12-20 12:29:22 +00:00
}
}
</script>
<style scoped>
a {
display: inline-block;
margin: 0 1em;
color: #34495e;
text-decoration: none;
}
a.disabled {
color: #ccc;
}
ul {
margin: auto;
padding: 0;
2016-12-20 12:44:12 +00:00
width: 100%;
max-width: 400px;
2016-12-20 12:29:22 +00:00
padding-top: 40px;
}
li {
list-style-type: none;
width: 400px;
border: 1px #ddd solid;
overflow: hidden;
}
li img {
float: left;
width: 100px;
height: 100px;
}
li span {
display: inline-block;
padding-top: 40px;
text-transform: uppercase;
}
</style>