vuetify table page is not working and reset back to 1

Question

I have implemented v-data-table by vuetify.

Everything is doing good until I make a search bar and search from the server. E.g I am at 2nd page and I use the search function and there is only one result but vuetify table remain at 2nd page and show me the searched result.

I would want the page to reset to 1st page.

<v-data-table
   :headers="headers"
   :items="users"
   :options.sync="options"
   :server-items-length="pagination.total"
   class="elevation-1"
   :footer-props="{
     itemsPerPageOptions: [10],
   }"
 >

searchUser() {
  this.options.page = 1;
  this.pagination.current = 1;
  this.pagination.page = 1;

  this.fetchItems();
  // this.$nextTick().then(()=>{
  //   this.$set(this.pagination, 'page', 1);
  //   this.$set(this.pagination, 'current', 1);
  //   this.$set(this.options, 'page', 1);
  // });
},

I tried to change the page value once I run the search function but still no luck for me. Please Help.

Answer 1

Vuetify recently updated their docs and live version to 2.0, but you still might be using the stable 1.5 release.

If you're using Vuetify 1.5, here's the documentation. It says you have to use a synchronized pagination prop:

Pagination can be controlled externally by using the pagination prop. Remember that you must apply the .sync modifier.

Here is the template code. I didn't really understand why you needed to have two locations to store the current page number, so I ignored your pagination.page and used pagination.current as the main indicator:

<v-data-table
  :headers="headers"
  :items="users"
  :pagination.sync="pagination.current"
  class="elevation-1"
>

And if you're using Vuetify 2.0, here's the latest documentation. It says you can choose between setting an individual prop or change an attribute inside the options prop. Both ways require the .sync modifier:

Pagination can be controlled externally by using the individual props, or by using the options prop. Remember that you must apply the .sync modifier.

However I couldn't find much details about the options prop, so I based the sample code below on the individual page prop:

<v-data-table
  :headers="headers"
  :items="users"
  :page.sync="pagination.current"
  :server-items-length="pagination.total"
  class="elevation-1"
  :footer-props="{
    itemsPerPageOptions: [10],
  }"
>

I hope this helps you.