My API has a endpoint that provides a list of countries. The endpoint accepts the following query parameters:
searchQuery // optional search string
startFrom // index to start from
count // number of options to return
For example, a request with searchQuery as '', startFrom as 0, and count as 10 will return first 10 countries.
Another request with searchQuery as Can, startFrom as 5, and count as 3 will return the fifth to eighth country containing the string Can.
I am looking to modify the pagination example from vue-select to utilize this REST API for fetching countries dynamically instead of using a static list as shown in the demo.
The Vue-select documentation also offers an ajax based example.
As a beginner in Vue, I'm struggling to integrate both methods as I desire.
Could a knowledgeable Vue expert provide guidance on how to achieve this?
Currently, my paginated example uses countries defined as a static array:
countries: ['Afghanistan', 'Albania', 'Algeria', ...]
Template:
<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:
data() {
return {
countries: // static array mentioned above
search: '',
offset: 0,
limit: 10,
}
}
Computed:
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)
},
What steps should I take to fetch countries from my REST API instead?