vuejs2 - Vuetify 数据表跳转到包含所选项目的页面

Question

使用 Vuetify 数据表，我试图弄清楚是否有办法确定当前所选项目所在的页面，然后跳转到该页面。我的用例是，我从路由中提取数据以确定在数据表中选择了哪个项目，因此当用户访问该 URL 或刷新页面时，系统会自动为他们选择相同的项目。这工作得很好，但是，我不知道如何让数据表显示正确的选择页面。

例如用户访问mysite.com/11数据表每页显示 10 个项目。当用户进入网站时，项目 #11 当前被自动选中，但它位于项目的第二页。我怎样才能让它在页面加载时显示项目 11-20？

Answer 1

我最终使用了类似于@ExcessJudgement 发布的解决方案。顺便说一句，谢谢你把那支密码笔放在一起!我创建了这个函数:

jumpToSelection: function(){
    this.$nextTick(() => {
      let selected = this.selected[0];
      let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
      this.pagination.sortBy = "id";
      this.$nextTick(() => {
        this.pagination.page = page;
      });
    });
  }

我不确定为什么我需要将它放入 $nextTick() 中，但否则它不会工作。如果有人对此有任何见解，那么了解为什么会这样会很有用。

需要第二个 $nextTick() 因为更新了 sortBy，然后页面导致页面不更新，并且由于我是根据 ID 找到页面，所以我需要确保它在跳转之前正确排序页。有点复杂，但它确实有效。