Skip to content

fix(pagination): support controlled page state #694

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
2xburnt wants to merge 1 commit into from
Closed

fix(pagination): support controlled page state #694

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/PaginationBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<script lang="ts" setup>
import { computed, ref } from 'vue';
import { computed, ref, watch } from 'vue';

const props = defineProps({
total: { type: String },
limit: { type: Number },
callback: { type: Function, required: true },
page: { type: Number, default: 1 },
});
const current = ref(1);
const current = ref(props.page);
watch(() => props.page, (page) => (current.value = page));

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep controlled selection sourced from the page prop

When a controlled consumer keeps page unchanged—for example, because navigation is rejected or its request fails—gotoPage() still changes current, while this watcher never runs because the prop value did not change. The bar therefore highlights the attempted page even though the controlling state still points to the previous page. In controlled mode, avoid mutating the displayed selection independently of page, or restore it when the callback does not update the prop.

Useful? React with 👍 / 👎.

const showSize = 3;
const pages = computed(() => {
const pages: { color: string; page: number }[] = [];
Expand Down Expand Up @@ -37,7 +39,7 @@ function gotoPage(pageNum: number) {
</script>
<template>
<div class="my-5 text-center">
<div v-if="total && limit" class="btn-group">
<div v-if="total && limit" class="inline-flex max-w-full flex-wrap justify-center gap-1">
<button
v-for="{ page, color } in pages"
:key="page"
Expand Down
Loading