当用户更改每页显示条数（如从 5 条改为 25 条）时，原当前页可能超出新总页数范围，导致分页失效或空白；本文提供基于 vue 2 的响应式校正方案，确保页码自动适配、数据连续可见。
当用户更改每页显示条数（如从 5 条改为 25 条）时，原当前页可能超出新总页数范围，导致分页失效或空白；本文提供基于 vue 2 的响应式校正方案，确保页码自动适配、数据连续可见。
在 Vue.js 分页实现中，pageNumber 与 resultsPerPage 共同决定数据切片范围。问题核心在于：当 dropdownResultsPerPage 变更时，pageNumber 并未同步重算，导致其值可能大于新的 numberOfPages，进而使 paginatedData 返回空数组，页面显示异常。
解决方案是利用 Vue 的 watch 机制，在 dropdownResultsPerPage 变化时，基于用户当前浏览的数据起始位置（即旧的 startIndex），重新计算最接近的合法页码，而非简单重置为第 1 页——这样可最大程度保留用户上下文，提升体验。
✅ 关键逻辑：按数据偏移量映射新页码
假设原始设置为每页 5 条、当前在第 5 页，则 startIndex = (5 - 1) × 5 = 20，即用户正查看索引 20～24 的卡片。若切换为每页 25 条，则新页码应为 Math.floor(20 / 25) + 1 = 1；若切换为每页 10 条，则 Math.floor(20 / 10) + 1 = 3。该公式保证用户始终看到包含原起始数据的那一页。
以下是优化后的完整代码（含健壮性增强）：
立即学习“前端免费学习笔记（深入）”；
const app = new Vue({
el: "#app",
data: {
apiUrl: "https://api.magicthegathering.io/v1/cards",
cards: [],
pageNumber: 1,
resultsPerPage: 5,
dropdownResultsPerPage: 5,
increments: [5, 10, 15, 20, 25]
},
created() {
this.fetchCards();
},
watch: {
dropdownResultsPerPage: {
handler(newVal, oldVal) {
if (!oldVal || newVal === oldVal) return;
// 计算旧起始索引，避免越界
const oldStartIndex = Math.max(0, (this.pageNumber - 1) * oldVal);
// 映射到新分页下的页码（至少为 1，至多为总页数）
const newPage = Math.min(
Math.max(1, Math.floor(oldStartIndex / newVal) + 1),
this.numberOfPages || 1
);
this.pageNumber = newPage;
this.resultsPerPage = newVal;
},
immediate: false
}
},
computed: {
startIndex() {
return (this.pageNumber - 1) * this.resultsPerPage;
},
endIndex() {
return this.startIndex + this.resultsPerPage;
},
numberOfPages() {
return this.cards.length ? Math.ceil(this.cards.length / this.resultsPerPage) : 1;
},
paginatedData() {
// 防止 slice 越界（如 cards 为空或 startIndex 超长）
return this.cards.slice(this.startIndex, Math.min(this.endIndex, this.cards.length));
}
},
methods: {
nextPage() {
if (this.pageNumber < this.numberOfPages) {
this.pageNumber++;
}
},
previousPage() {
if (this.pageNumber > 1) {
this.pageNumber--;
}
},
fetchCards() {
axios
.get(this.apiUrl)
.then(response => {
this.cards = response.data.cards || [];
})
.catch(error => {
console.error("Failed to load MTG cards:", error);
this.cards = [];
});
}
}
});⚠️ 注意事项与最佳实践
- 边界防护：numberOfPages 计算前判断 cards.length，避免除零；paginatedData 中使用 Math.min(this.endIndex, this.cards.length) 防止 slice 越界。
- 按钮禁用逻辑：Previous 按钮绑定 :disabled="pageNumber = numberOfPages"，确保 UI 状态与数据一致。
- 初始加载顺序：将 API 请求封装为 fetchCards() 方法并在 created 中调用，提升可维护性与错误处理能力。
- 性能提示：本方案适用于中小型数据集（如数千张卡牌）。若数据量极大（>10万），建议改用后端分页 + offset/limit，前端仅做状态管理。
通过上述实现，无论用户如何切换每页数量，分页控件都能自动校准当前页，既保持数据可见性，又维持操作直觉——这是构建专业级 Vue 分页组件的关键细节。
