0

我正在使用 Nuxt 2.15.8 和 @nuxtjs/vuetify 1.12.1 (Vuetify 2)。

我有一个带有服务器端分页的 v-data-table，每一行/项目都有一个指向详细信息页面的链接。一切正常。

当用户在 v-data-table 中导航时，我在 URL 中添加页码，?page=2因此当用户从详细信息页面单击浏览器后退按钮时，我可以将 v-data-table 重置到它们所在的位置。（我对搜索条件做同样的事情，它工作得很好）。

如果我在 created() 中记录 this.options.page，我有正确的数字，但在 mount() 中它被重置为 1，我不明白为什么。

对 API 的调用是从 watch on options 中触发的。

模板

<v-data-table
  :headers="headers"
  :items="items"
  :options.sync="options"
/>

脚本（如果我预设 1 或 0，它会做同样的事情......）

data() {
  return {
    options: {
      page:
        this.$route.query && this.$route.query.page
          ? Number(this.$route.query.page)
          : 0
    }
  }
}

我尝试了很多方法来修复它（添加一个标志以防止对 API 的多次调用，在 API 调用后重置 options.page 但最终进行了两次调用......）我无法在此处列出所有这些。

我认为我可能不了解 Nuxt 和 v-data-table 的生命周期，因此对此的任何了解都会非常感激！最好是一个工作示例：*我可以为您提供帮助的任何信息，请询问。

我发现与我的问题相关的唯一主题是这个旧主题，但没有答案。

谢谢！

4

0 回答 0