☙◦ The Tablet ❀ GamerGirlandCo ◦❧
8ec7a09193
this includes - individual story information - the list itself (duh) - a component for displaying key-value pairs delimited by `: `
52 lines
1.2 KiB
Vue
52 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
;
|
|
import singleStory from '~/components/listings/singleStory.vue';
|
|
const route = useRoute()
|
|
let curPage = ref(route.query.page || 1)
|
|
const props = defineProps<{ prefix: string; }>()
|
|
let { data }: any = await useApiFetch(`${props.prefix}/stories`, {
|
|
query: {
|
|
page: curPage
|
|
}
|
|
})
|
|
let rdata = ref(data)
|
|
const pagiChange = async (page, pageSize) => {
|
|
curPage.value = page;
|
|
// await navigateTo({
|
|
// path: useRoute().fullPath,
|
|
// query: {
|
|
// page
|
|
// }
|
|
// })
|
|
// let { data }: any = 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> |