I have a rest end point which returns a list of countries. It takes the following query parameters:
searchQuery // optional search string
startFrom // the index in the list from where to return options
count // number of options to return
So a query with searchQuery as '', startFrom as 0 and count as 10 will return first 10 countries from the list.
A query with searchQuery as Can, startFrom as 5 and count as 3 will return fifth to eight country from the list of countries containing the string Can.
I want to modify the pagination example from vue-select to use above rest api to fetch countries instead of using a static list of countries as is there in the example.
Vue-select docs also has ajax based example.
However, because I am new to Vue, I am having some difficulty in combining the two in the way I want.
Can some vue expert please provide some pointers to achieve what I want.
Here is my paginated example with countries as a static array of the form:
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 as 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)
},
How do I convert this to get countries from my rest end point?
