vuetify 表格页面不工作并重置为 1

Question

我已经通过 vuetify 实现了 v-data-table。

一切都很好，直到我创建一个搜索栏并从服务器搜索。例如，我在第 2 页，我使用搜索功能，结果只有一个，但 vuetify 表保留在第 2 页并显示搜索结果。

我希望页面重置为第一页。

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

运行搜索功能后，我尝试更改页面值，但对我来说仍然没有运气。请帮忙。

Answer 1

Vuetify 最近将他们的文档和实时版本更新为 2.0，但您可能仍在使用稳定的 1.5 版本。

如果您使用的是Vuetify 1.5，这里是文档。它说你必须使用一个同步pagination道具：

分页可以通过使用paginationprop进行外部控制。请记住，您必须应用.sync修饰符。

这是模板代码。我真的不明白为什么你需要有两个位置来存储当前页码，所以我忽略了你的pagination.page和用作pagination.current主要指标：

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

如果您使用的是Vuetify 2.0，这里是最新的文档。它说您可以选择设置单个道具或更改options道具内的属性。两种方式都需要.sync修饰符：

分页可以通过使用单独的 props 或通过使用optionsprop进行外部控制。请记住，您必须应用.sync 修饰符。

但是，我找不到有关options道具的太多详细信息，因此我将以下示例代码基于单个page道具：

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

我希望这可以帮助你。