CODEWITHSUNDEEP
vuejs2vuetify.js
drew kroft
drew kroft

Reputation: 916

Vuetify Data Table jump to page with selected item

Using Vuetify Data Tables, I'm trying to figure out if there's a way to determine what page the current selected item is on, then jump to that page. My use case for this is, I'm pulling data out of the route to determine which item was selected in a Data Table so when a user follows that URL or refreshes the page that same item is automatically selected for them. This is working just fine, however, I can't figure out how to get the Data Table to display the correct page of the selection.

For example, user visits mysite.com/11 The Data Table shows 10 items per page. When the user enters the site, item #11 is currently auto-selected, but it is on the 2nd page of items. How can I get this to show items 11-20 on page load?

Upvotes: 3

Views: 3826

Answers (1)

drew kroft
drew kroft

Reputation: 916

I ended up using a solution similar to what @ExcessJudgement posted. Thank you for putting that code pen together, BTW! I created this function:

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;
      });
    });
  }

I'm not sure why I needed to put this into a $nextTick(), but it would not work otherwise. If anybody has any insight into this, it would be useful to know why this is the case.

The second $nextTick() was needed because updating the sortBy, then the page was causing the page to not update, and since I'm finding the page based on the ID, I need to make sure it's sorted properly before jumping pages. A bit convoluted, but it's working.

Upvotes: 4

Related Questions