Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

134
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda