next/components/listings/stories.vue

<script setup lang="ts">
	import singleStory from "~/components/listings/singleStory.vue";
	import { IStory } from "@models/stories";
	const route = useRoute();
	let curPage = ref(route.query.page || 1);
	const props = defineProps<{
		prefix: string;
		last?: boolean;
	}>();
	let data = (
		await useApiFetch<any>(props.prefix, {
			query: {
				page: curPage.value,
			},
		})
	).data.value;
	let rdata = ref(data);
	const loading = ref<boolean>(false);
	const pagiChange = (page, pageSize) => {
		loading.value = true;
		curPage.value = page;
		useApiFetch(props.prefix, {
			query: {
				page,
			},
		}).then(({ data }) => {
			rdata.value = data.value;
			loading.value = false;
			navigateTo({
				path: useRoute().fullPath,
				query: {
					page,
				},
			});
		});
	};
</script>
<template>
	<div>
		<a-list v-model:data-source="rdata.stories" item-layout="vertical" v-model:loading="loading">
			<template #renderItem="{ item }">
				<single-story :key="item._id" :story="item" :last="last" />
			</template>
		</a-list>
		<a-pagination
			v-model:disabled="loading"
			:default-page-size="20"
			:total="rdata.total"
			@change="pagiChange"
			:show-quick-jumper="true"
			:show-size-changer="false"
		/>
	</div>
</template>
<style>
	ul.ant-list-items > * + * {
		margin-top: 1.2em;
	}

	.ant-pagination {
		text-align: center;
	}
</style>