diff --git a/web/src/components/FileBrowser/FileBrowserPagination.vue b/web/src/components/FileBrowser/FileBrowserPagination.vue
index 382142b38..321e1dcb7 100644
--- a/web/src/components/FileBrowser/FileBrowserPagination.vue
+++ b/web/src/components/FileBrowser/FileBrowserPagination.vue
@@ -31,6 +31,7 @@
:max="pageCount"
:maxlength="pageCount"
:rules="[pageIsValid]"
+ @change="emit('changePage', pageInput)"
/>
of {{ pageCount }}
diff --git a/web/src/views/FileBrowserView/FileBrowser.vue b/web/src/views/FileBrowserView/FileBrowser.vue
index 247916b5e..dc611b241 100644
--- a/web/src/views/FileBrowserView/FileBrowser.vue
+++ b/web/src/views/FileBrowserView/FileBrowser.vue
@@ -246,7 +246,7 @@
v-if="currentDandiset.asset_count"
:page="page"
:page-count="pages"
- @changePage="page = $event;"
+ @changePage="changePage($event)"
/>
@@ -502,7 +502,7 @@ watch(location, () => {
if (existingLocation === location.value) { return; }
router.push({
...route,
- query: { location: location.value },
+ query: { location: location.value, page: String(page.value) },
} as RawLocation);
});
@@ -517,9 +517,13 @@ watch(() => route.query, (newRouteQuery) => {
// Retrieve with new location
getItems();
}, { immediate: true });
-
-// fetch new page of items when a new one is selected
-watch(page, getItems);
+const changePage = (newPage: number) => {
+ page.value = newPage;
+ router.push({
+ ...route,
+ query: { location: location.value, page: String(page.value) },
+ } as RawLocation);
+};
// Fetch dandiset if necessary
onMounted(() => {