Vuetify 表页面不起作用并重置回 1

Question

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

一切都很好，直到我制作搜索栏并从服务器搜索。例如，我在第二页，我使用搜索功能，只有一个结果，但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道具：

分

页可以通过使用pagination道具在外部控制。 请记住，您必须应用.sync修饰符。

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

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

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

分页可以通过使用单个道具在外部控制， 或使用options道具。请记住，您必须应用.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],
}"
>

我希望这对你有所帮助。