mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-12 23:37:14 +00:00
92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
|
<template>
|
||
|
<div class="container">
|
||
|
<nuxt-link v-if="page > 1" :to="'?page=' + (page - 1)">< Prev</nuxt-link>
|
||
|
<a v-else class="disabled">< Prev</a>
|
||
|
<span>{{ page }}/{{ totalPages }}</span>
|
||
|
<nuxt-link v-if="page < totalPages" :to="'?page=' + (page + 1)">Next ></nuxt-link>
|
||
|
<a v-else class="disabled">Next ></a>
|
||
|
<transition mode="out-in" :name="transitionName">
|
||
|
<ul :key="page">
|
||
|
<li v-for="user in users" :key="user.id">
|
||
|
<img :src="user.avatar" class="avatar" />
|
||
|
<span>{{ user.first_name }} {{ user.last_name }}</span>
|
||
|
</li>
|
||
|
</ul>
|
||
|
</transition>
|
||
|
<p><nuxt-link to="/">Back home</nuxt-link></p>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
|
import axios from 'axios'
|
||
|
|
||
|
export default {
|
||
|
watch: {
|
||
|
'$route.query.page': async function (page) {
|
||
|
this.$nuxt.$loading.start()
|
||
|
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
|
||
|
this.users = data.data
|
||
|
this.transitionName = this.getTransitionName(page)
|
||
|
this.page = +(page || 1)
|
||
|
this.totalPages = data.total_pages
|
||
|
this.$nuxt.$loading.finish()
|
||
|
}
|
||
|
},
|
||
|
async asyncData({ query }) {
|
||
|
const page = +(query.page || 1)
|
||
|
const { data } = await axios.get(`https://reqres.in/api/users?page=${page}`)
|
||
|
return {
|
||
|
page,
|
||
|
totalPages: data.total_pages,
|
||
|
users: data.data
|
||
|
}
|
||
|
},
|
||
|
data() {
|
||
|
return {
|
||
|
transitionName: this.getTransitionName(this.page)
|
||
|
}
|
||
|
},
|
||
|
methods: {
|
||
|
getTransitionName(newPage) {
|
||
|
return newPage < this.page ? 'slide-right' : 'slide-left'
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<style scoped>
|
||
|
a {
|
||
|
display: inline-block;
|
||
|
margin: 0 1em;
|
||
|
color: #34495e;
|
||
|
text-decoration: none;
|
||
|
}
|
||
|
a.disabled {
|
||
|
color: #ccc;
|
||
|
}
|
||
|
ul {
|
||
|
margin: auto;
|
||
|
padding: 0;
|
||
|
width: 100%;
|
||
|
max-width: 400px;
|
||
|
padding-top: 40px;
|
||
|
transition: all .5s cubic-bezier(.55,0,.1,1);
|
||
|
}
|
||
|
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>
|