Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

135
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda