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}/stories`, {
		// 	query: {
		// 		page: curPage
		// 	}
		// })
		// rdata.value = data;
	};
</script>
<template>
	<a-list
		:pagination="{
			defaultPageSize: 20,
			total: rdata.total,
			defaultCurrent: curPage as number,
			// onChange: pagiChange,
			hideOnSinglePage: true,
			showSizeChanger: false,
		}"
		:data-source="rdata.stories"
		item-layout="vertical"
	>
		<template #renderItem="{ item }">
			<!-- {{ item.title }} -->
			<single-story :story="item" />
		</template>
	</a-list>
</template>
<style scoped>
	.ant-list-items > * + * {
		margin-top: 1.2em;
	}

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