Vue разбито на страницы ajax на основе выбора - PullRequest
Новая
       9

Vue разбито на страницы ajax на основе выбора

0 голосов
/ 03 мая 2020

У меня есть конечная точка отдыха, которая возвращает список стран. Он принимает следующие параметры запроса: 

searchQuery // optional search string
startFrom // the index in the list from where to return options
count // number of options to return

Таким образом, запрос с searchQuery как '', startFrom как 0 и count как 10 вернет первые 10 стран из list.

Запрос с searchQuery в качестве Can, startFrom в качестве 5 и count в качестве 3 вернет пятую-восьмую страну из списка стран, содержащих строку Can.

Я хочу изменить пример pagination из vue -выберите , чтобы использовать остальные api rest для получения стран вместо использования списка stati c из стран, которые есть в примере.

Vue -выбрать документы также имеет ajax пример на основе.

Однако, потому что я новичок в Vue У меня возникли некоторые трудности с объединением этих двух слов так, как я хочу.

Может ли какой-нибудь эксперт vue предоставить несколько указателей для достижения того, чего я хочу.

Вот мой разбитый на страницы пример с countries массивом c массива вида: 

countries: ['Afghanistan', 'Albania', 'Algeria', ...]

Шаблон: 

<v-select :options="paginated" @search="query => search = query" :filterable="false">
    <li slot="list-footer" class="pagination">
      <button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
      <button @click="offset += 10" :disabled="!hasNextPage">Next</button>
    </li>
</v-select>

Данные: 

data() {
    return {
        countries: // static array as mentioned above
        search: '',
        offset: 0,
        limit: 10,
    }
}

Вычислено: 

filtered() {
  return this.countries.filter(country => country.includes(this.search))
},
paginated() {
  return this.filtered.slice(this.offset, this.limit + this.offset)
},
hasNextPage() {
  const nextOffset = this.offset + 10
  return Boolean(this.filtered.slice(nextOffset, this.limit + nextOffset).length)
},
hasPrevPage() {
  const prevOffset = this.offset - 10
  return Boolean(this.filtered.slice(prevOffset, this.limit + prevOffset).length)
},

Как мне преобразовать это, чтобы получить countries от моей конечной точки отдыха?

1 Ответ

0 голосов
/ 03 мая 2020

Это зависит от работы, которую вы выполняете в функции fetchOptions. По сути, вам нужно передать данные разбивки на страницы в эту функцию и использовать эти данные в качестве параметров запроса в запросе AJAX. Укажите больше кода, чтобы я мог указать вам, как его решить.

...