Nuxt2+Vuetify2 v-data-table mounted阶段options.page被重置为1问题求解

• Vuetify 2的v-data-table内置分页逻辑强制要求页码从1开始，你初始化给page的默认值为0不符合组件规则，组件挂载阶段会自动校正分页参数，把不符合规范的page值重置为1
• Nuxt服务端渲染场景下，客户端激活（hydrate）过程中v-data-table会重新初始化自身状态，优先用组件内部默认值覆盖你传入的自定义初始值，就会出现created阶段值正确、mounted被重置的问题
• options.sync的双向绑定在组件初始化校正参数时会反向更新你本地的options变量，直接覆盖你从URL读取到的页码值

核心逻辑是先完成路由参数解析、首次数据请求，再渲染表格并开启参数监听，避开组件初始化的自动校正逻辑，同时避免多余的接口请求：

<template>
  <!-- 用v-if控制表格渲染时机，等参数初始化完成再渲染 -->
  <v-data-table
    v-if="isTableReady"
    :headers="headers"
    :items="items"
    :options.sync="options"
    :server-items-length="total"
    :loading="loading"
  />
</template>

export default {
  data() {
    return {
      isTableReady: false,
      loading: false,
      total: 0,
      items: [],
      headers: [/* 你的表头配置 */],
      // 初始化参数符合组件规则，默认值不要设为0
      options: {
        page: 1,
        itemsPerPage: 10 // 和组件默认分页条数保持一致，避免被自动校正
      }
    }
  },
  async created() {
    // 优先从路由参数读取分页值
    if (this.$route.query?.page) {
      this.options.page = Number(this.$route.query.page)
    }
    if (this.$route.query?.itemsPerPage) {
      this.options.itemsPerPage = Number(this.$route.query.itemsPerPage)
    }
    // 首次请求列表数据
    await this.fetchList()
    // 数据请求完成后再渲染表格，避免组件重置参数
    this.isTableReady = true
    // 表格挂载完成后再开启options监听，避免初始化触发多余请求
    this.$nextTick(() => {
      this.$watch('options', this.handleOptionsChange, { deep: true })
    })
  },
  beforeDestroy() {
    // 销毁前移除监听避免内存泄漏
    this.$unwatch('options')
  },
  methods: {
    async fetchList() {
      this.loading = true
      try {
        // 替换为你的实际接口请求逻辑
        const res = await yourListApi({
          page: this.options.page,
          pageSize: this.options.itemsPerPage
        })
        this.items = res.list
        this.total = res.total
      } finally {
        this.loading = false
      }
    },
    handleOptionsChange(newOptions) {
      // 更新路由参数
      this.$router.replace({
        query: {
          ...this.$route.query,
          page: newOptions.page,
          itemsPerPage: newOptions.itemsPerPage
        }
      })
      // 发起新的列表请求
      this.fetchList()
    }
  }
}

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