Vuetify外部分页点击无响应：响应式变量page未触发数据加载

你的问题核心是：响应式变量page更新后，没有触发loadUsers重新请求数据。当前代码只在初始化时调用了一次loadUsers，分页按钮改变page值时没有绑定触发逻辑，所以不会自动加载新页数据。

两种可行解决方案 #

方案1：监听page变量的变化（推荐） #

使用Vue的watchAPI监听page的更新，一旦值变化就调用loadUsers加载对应页数据：

import { ref, computed, watch } from 'vue'

// 原有的响应式变量定义
const users = ref([])
const pageSize = ref(10)
const page = ref(1)
const totalUserCount = ref(1)
const pageNumbers = computed(() => Math.ceil(totalUserCount.value / pageSize.value))

const loadUsers = async (currentPage) => {
  // 简化异步写法，避免await和then混用
  const response = await HTTPClient.getData(`/user-manager/users?page=${currentPage}`)
  users.value = response.data.result
  pageSize.value = response.data.page_size
  totalUserCount.value = response.data.count
}

// 添加watch监听page变化
watch(page, (newPage) => {
  loadUsers(newPage)
})

// 初始化加载
await loadUsers(page.value)

方案2：给分页组件绑定change事件 #

直接在v-pagination上添加@change事件，触发时调用loadUsers：

<v-pagination
  v-model="page"
  :length="pageNumbers"
  @change="loadUsers(page)"
></v-pagination>

脚本部分保持原有逻辑即可，无需额外添加watch。

额外优化建议 #

• 避免在async/await中混用.then()，代码会更简洁易读，也减少潜在的异步嵌套问题。
• 可以添加加载状态（比如用ref(false)控制加载动画），提升用户体验。

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