Получить предыдущее количество страниц, если текст превышает 2 символа - PullRequest
Новая
       12

Получить предыдущее количество страниц, если текст превышает 2 символа

1 голос
/ 16 февраля 2020

Я создаю загружаем больше функциональности в v-autocomplete (vuetify's компонент).

Вот мои логики c:

-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 = ''

Данные поступают со страницы 1 из API.

Действие => Загрузить больше , CurrentPage = 2, Search = ''

Данные поставляются со страницей 2 из API.

Действие => Загрузить больше , CurrentPage = 3, Search = ''

Данные поставляются со страницей 3 из API.

Действие => Загрузить больше , CurrentPage = 4, Search = ''

Данные поступают со страницы 4 из API.

Action => Keyup , CurrentPage = 4, Search = 'Vu' <= <em>Vu длина < 2

, поэтому данные остаются теми же

Action => Keyup , CurrentPage = 1, Search = 'Vue' <= <em>Vue длина > 2

, поэтому данные поступают со страницы 1 и запрос Vue от API.

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

Ничего не происходит, так как поиск сброшен ( text <2 </em>), но обратите внимание CurrentPage = 1

Действие => Загрузить еще , CurrentPage = 2, Search = ''

Данные поступают со страницы 2 из API, здесь начинается проблема , потому что я использую cache-items (который на самом деле кеширует данные) Мне не нужно снова извлекать данные страницы 2, мне нужно извлекать данные страницы 5 как У меня есть данные до страницы 4

Мне нужно отметить последнюю страницу с Search < 3, я пробовал некоторые решения, но они не работают, одно из этих решений - сделать PreviousPage = -1, а если Search === 3, установить PreviousPage = CurrentPage, но это не работает, и загружайте больше соответственно.

Любые предложения ??

1 Ответ

1 голос
/ 16 февраля 2020

Попробуйте: 

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 переменную, и дайте мне знать, если она работает для вас.

...