使用Nuxt实现Previos和Next Page

Question

我在nuxt 中实现上一个和下一个时遇到问题

在我的模板中，我有这个

<template>
<div class="mt-8">
<div class="flex justify-between">
<h4 class="title text-orange-500 font-semibold">
<span>POPULAR MOVIES</span>
</h4>
<h4 class="title text-orange-500">
<span>Page: {{ currentPage }} of {{ totalPages }}</span>
</h4>
</div>
<div class="popular grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8">
<Moviecards
v-for="(movie, index) in popularmovies"
:key="index"
:movie="movie"
:data-index="index"
/>
</div>
<div class="flex space-x-4 justify-center mt-8">
<span v-if="currentPage === null">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l ml-8 cursor-not-allowed">
Prev
</button>
</span>
<span v-else>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l ml-8" @click="currentPage--">
Prev
</button>
</span>
<span v-if="currentPage === totalPages">
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r mr-8 cursor-not-allowed">
Next
</button>
</span>
<span v-else>
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r mr-8" @click="next">
Next
</button>
</span>
</div>
</div>
</template>

在我的脚本中，我有这个

<script>
import Moviecards from '@/components/Moviecards.vue'
export default {
components: {
Moviecards
},
data () {
return {
prevpage: null,
nextpage: null,
currentPage: 1,
pageNumbers: [],
totalPages: 0,
popularmovies: []
}
},
methods: {
next () {
this.currentPage += 1
},
previous () {
this.currentPage -= 1
}
},
// eslint-disable-next-line vue/order-in-components
async fetch () {
const popularmovies = await fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_SECRET}&page=${this.currentPage}`
).then(res => res.json())
this.totalPages = popularmovies.total_pages
this.popularmovies = popularmovies.results
}

下一个方法起作用，currentPage增加一，上一个减少一。但我无法更新API调用URL，我认为它是在请求页面时加载的。我需要帮助想办法解决这个问题。谢谢

Answer 1

您可以使用以下代码来解决这个问题

let pages = getCurrentPages();
let beforePages = pages[pages.length - 2];//the before pages object 
console.log(beforePages);

Answer 2

也许您可以尝试以下代码，这可能适用于您的问题

<template>
<ul class="app-pagination">
<template v-if="url">
<li v-show="(current > Math.ceil(showItem / 2)) && (totalPage > showItem)">
<nuxt-link :to="`${url}${1}`">
Main
</nuxt-link>
</li>
<li v-show="current != 1" @click="current--">
<nuxt-link :to="`${url}${current - 1}`">
Previous
</nuxt-link>
</li>
<li v-for="index in pages" :key="index" :class="{'active':current == index}">
<nuxt-link :to="`${url}${index}`">
{{ index }}
</nuxt-link>
</li>
<li v-show="pageSize * current <= total " @click="current++">
<nuxt-link :to="`${url}${current + 1}`">
Next
</nuxt-link>
</li>
<li v-show="(current < totalPage) && (totalPage > showItem)">
<nuxt-link :to="`${url}${totalPage}`">
last page
</nuxt-link>
</li>
<li class="total">
<a href="javascript:void(0)"> {{ total }} </a>
</li>
</template>
<template v-else>
<li @click="goto('start')">
<a href="javascript:void(0)">Index</a>
</li>
<li v-show="current != 1" @click="goto('prev')">
<a href="javascript:void(0)">Previous</a>
</li>
<li v-for="index in pages" :key="index" :class="{'active':current == index}" @click="goto(index)">
<a href="javascript:void(0)">{{ index }}</a>
</li>
<li v-show="totalPage != current && total != 0 && total != current" @click="goto('next')">
<a href="javascript:void(0)">Next</a>
</li>
<li @click="goto('end')">
<a href="javascript:void(0)">Last Page</a>
</li>
<li class="total">
<a href="javascript:void(0)">{{ total }}</a>
</li>
</template>
</ul>
</template>
<script>
export default {
name: 'AppPager',
props: {
url: { //Pagination link
required: false,
type: [String],
default: null
},
total: {
required: false,
type: [Number],
default: 0
},
page: {
required: false,
type: [Number, String],
default: 0
}
},
data() {
return {
current: 1,
showItem: 5,
pageSize: 8
};
},
computed: {
pages() {
let pag = [];
// Starting number
let left = 1;
// Ending number
const totalPage = this.totalPage;
let right = totalPage;
let middle = Math.ceil(this.showItem / 2);
if (totalPage >= this.showItem) {
// In the middle, we add it to both sides（middle-1)
if (this.current > middle && this.current < totalPage - (middle - 1)) {
left = this.current - (middle - 1);
right = this.current + (middle - 1);
} else {
//Far left or in the middle of condition
if (this.current <= middle) {
left = 1;
right = this.showItem;
// On the far right
// The end is the total number of items, and the beginning is condition minus 1
} else {
right = totalPage;
left = totalPage - (this.showItem - 1);
}
}
}
while (left <= right) {
pag.push(left);
left++;
}

//total pages
console.log(pag);
return pag;
},

/**
* Calculate the total number of pages according to the total number of articles
*/
totalPage() {
return this.total % this.pageSize ? Math.floor(this.total / this.pageSize) + 1 : this.total / this.pageSize;
}

},
watch: {
page: {
handler(old, val) {
this.current = Number(old);
},
immediate: true
}
},
methods: {
goto(index) {
if (index == 'start') {
this.current = 1;
this.$emit('page', 1);
} else if (index == 'end') {
this.current = this.totalPage;
this.$emit('page', this.totalPage);
} else if (index == 'prev') {
this.current--;
this.$emit('page', this.current);
} else if (index == 'next') {
this.current++;
this.$emit('page', this.current);
} else {
this.$emit('page', index);
}
}
}
};
</script>
<!-- this is less code -->
<style lang="less" scoped>
.app-pagination{
margin: 40px auto;
text-align: center;
li{
display: inline-block;
margin: 0 6px;
a{
padding: 8px;
display: inline-block;
color: #626262;
&:hover{
color: #FFB400;
}
}
&.active a{
color: #FFB400;
}
&.total a{
color: #FFB400;
}
}
}
</style>