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; items?: IStory[] }>();
	let data;
	if (!props.prefix) {
		data = props.items;
	} else if (!props.items) {
		data = (
			await useApiFetch<any>(`${props.prefix}`, {
				query: {
					page: curPage,
				},
			})
		).data;
	}
	let rdata = ref(data);
	const pagiChange = async (page, pageSize) => {
		curPage.value = page;
		// await navigateTo({
		// 	path: useRoute().fullPath,
		// 	query: {
		// 		page
		// 	}
		// })
		let { data: data } = await useApiFetch(`${props.prefix}`, {
			query: {
				page: curPage,
			},
		});
		rdata.value = data.value;
	};
</script>
<template>
	<div>
		<a-list :data-source="rdata.stories" item-layout="vertical">
			<template #renderItem="{ item }">
				<!-- {{ item.title }} -->
				<single-story :story="item" />
			</template>
		</a-list>
		<a-pagination
			:default-page-size="20"
			:total="rdata.total"
			:default-current="curPage as number"
			@change="pagiChange"
			:show-quick-jumper="true"
			:show-size-changer="false"
		/>
	</div>
	<!--		{
			defaultPageSize: 20,
			total: rdata.total,
			defaultCurrent: curPage as number,
			onChange: pagiChange,
			// hideOnSinglePage: true,
			showSizeChanger: false,
		}-->
</template>
<style scoped>
	.ant-list-items > * + * {
		margin-top: 1.2em;
	}

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