javascript - 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，这里是 documentation .它说你必须使用同步的 pagination Prop :

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

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

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

如果您使用的是 Vuetify 2.0，这里是 latest documentation .它说您可以选择设置单个 Prop 或更改 options Prop 内的属性。这两种方式都需要 .sync 修饰符:

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

但是我找不到关于 options prop 的更多细节，所以我将下面的示例代码基于单独的 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],
  }"
>

希望对你有帮助