Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

131
Views
Pagination AND a computed search

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!