I'm using Vue and Firestore via Vuefire.
I want to paginate the data from 'IncompleteWords', AND be able to search. I have managed to get them both working, but not quite independently of each other.
At the moment, the following code paginates the data with a page limit of 2, BUT searching only filters those that are on the current page.
I'd like it to be that searching filters the entire IncompleteWords array (and still paginates the resulting set).
<v-text-field
outlined
placeholder="Search Incomplete Words"
v-model="incompleteSearchBar"
></v-text-field>
<v-card v-for="Incomplete in filteredIncomplete" :key="Incomplete">
<v-pagination
v-model="page"
:length="Math.ceil(IncompleteWords.length % pageLimit) + 1"
@input="updatePagination()"
></v-pagination>
export default {
title: "Nouns",
data() {
return {
page: 1,
pageLimit: 2,
IncompleteWords: [],
IncompleteWordsSelection: [],
incompleteSearchBar: "",
async updatePagination() {
this.IncompleteWordsSelection = []
for (var i = 0; i < this.pageLimit; i++) {
this.IncompleteWordsSelection.push(this.IncompleteWords[(this.page - 1)+i])
}
}
firestore: {
IncompleteWords: db.collection("Nouns").where("incomplete", "==", true)
},
computed: {
filteredIncomplete() {
return this.IncompleteWordsSelection.filter((IncompleteWord) => {
return IncompleteWord.english.match(this.incompleteSearchBar);
})
}
}
Any advice is greatly appreciated.
Also, this currently reads every single document in the Firestore collection, right? Is there any way I can work with Vuefire and pagination in this way to only fetch the current page? I tried a custom solution, using startAfter(), to fetch the NEXT page and push the results to an array to hold everything fetched so far, but if, for example, I went from page 1 to page 3, I would still have to go through page 2, otherwise I would have no way of knowing what startAfter() to choose. This would still require the same reads, right? I can't see a way around this unfortunately, but any suggestions would be helpful. Thank you