<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>