Vuetify分页组件点击按钮无法切换数据问题求助

问题原因 #

你代码里的pageNo是普通变量，不是Vue的响应式状态，点击分页按钮修改pageNo时，Vue无法追踪到它的变化，也就不会重新执行pagedAssets和numPages计算属性，导致页面内容不更新。

修复步骤 #

1. 将pageNo改为响应式变量，用ref()声明
2. 可选优化：用slice()替代splice()截取数组（slice()不会修改原数组，更适配计算属性的纯逻辑场景）

修改后的完整代码 #

<template>
  <div class="grid grid-cols-4 gap-5">
    <div v-for="(item, index) in pagedAssets" :key="`asset_index_${index}`">
      {{ item }}
    </div>
    <v-pagination
      v-model="pageNo"
      :length="numPages"
    ></v-pagination>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const pageSize = 4;
const pageNo = ref(1); // 改为响应式变量
const assets = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16"];

const numPages = computed(() => {
  return Math.ceil(assets.length / pageSize);
});

const pagedAssets = computed(() => {
  const startIndex = (pageNo.value - 1) * pageSize;
  // 使用slice直接截取子数组，无需额外复制原数组
  return assets.slice(startIndex, startIndex + pageSize);
});
</script>

说明 #

• ref()声明的变量会被Vue追踪变化，修改pageNo.value（模板中可直接用pageNo）时，计算属性会自动重新计算
• slice(start, end)返回从start到end（不包含）的子数组，不会修改原数组，比splice()更适合计算属性的纯逻辑需求

内容的提问来源于stack exchange，提问作者Bester_Dev