如果文本超过 2 个字符，则获取上一页数

Question

我正在v-autocomplete（vuetify's 组件）中构建加载更多功能。

这是我的逻辑：

-1：注册keyup事件函数，如果文本超过2个字符，就会调用fetch，代码如下：

// Data
Search = '';
CurrentPage = 1;
Timer;

// Search
search(event) {
  const value = event.target.value;
  if (!!value && value.length > 2) {
    if (this.Timer) {
      clearTimeout(this.Timer);
    }
    this.Timer = setTimeout(() => {
      this.fetch(false);
    }, 500);
  }

-2：这里是 fetch 函数，它将调用 API：

fetch(IsLoadMore) {
  if (IsLoadMore) {
    this.CurrentPage++;
    API.get(this.Search, this.CurrentPage);
  } else if (!!this.Search && this.Search.length > 2) {
    this.CurrentPage = 1;
    API.get(this.Search, this.CurrentPage);
  }
}

-3：这是组件：

<v-autocomplete
  :search-input.sync="Search"
  cache-items
  @keyup="search"
>
  <template v-slot:append-item>
    <v-btn
      small
      class="pa-0"
      block
      color="success"
      @click="fetch(true)" <!-- Load More -->
    >Load More</v-btn>
</v-autocomplete>

现在，我在这里遇到了一些问题，让我们通过一些示例输入来理解它：

1. 操作 => 页面加载，CurrentPage = 1, Search = ''

数据来自 API 的第 1 页。

1. 操作 => 加载更多，CurrentPage = 2, Search = ''

数据来自 API 的第 2 页。

1. 操作 => 加载更多，CurrentPage = 3, Search = ''

数据来自 API 的第 3 页。

4. 操作 => 加载更多，CurrentPage = 4, Search = ''

数据来自 API 的第 4 页。

5. Action => Keyup, CurrentPage = 4, Search = 'Vu' Vu 长度为< 2

所以，数据保持不变

6. Action => Keyup, CurrentPage = 1, Search = 'Vue' Vue 长度为 > 2

所以，第 1 页自带数据，从 API 查询 Vue。

1. Action => Keyup, CurrentPage = 1, Search = ''

搜索重置后没有任何反应（text ），但请注意CurrentPage = 1

8. 操作 => 加载更多，CurrentPage = 2, Search = ''

数据来自 API 的第 2 页，问题开始了，因为我使用的是cache-items （它实际上缓存了数据）我不需要再次获取第 2 页数据，我需要获取第 5 页数据，因为 我有数据直到第 4 页

我需要用Search < 3 记下最后一页，我尝试了一些解决方案但不起作用，其中一个解决方案是制作PreviousPage = -1，如果Search === 3，则设置PreviousPage = CurrentPage，但是它不起作用，并相应地加载更多。

有什么建议吗？？

Answer 1

试试这个：

fetch(IsLoadMore) {
  if (IsLoadMore) {
    this.CurrentPage++;
    API.get(this.Search, this.CurrentPage);
  } else if (!!this.Search && this.Search.length > 2) {
    if (this.CurrentPage > 1) // <-- here's the trick!
      this.PreviousPage = this.CurrentPage;
    this.CurrentPage = 1;
    API.get(this.Search, this.CurrentPage);
  }
}

确保将 PreviousPage 设为变量，并让我知道它是否适合您。