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

169
Visualizações
How to properly chain Firestore queries using checkboxes

Context

I'm trying to create a document list view with a filter sidebar. The documents are stored in Firestore and I'm using Nuxt with Vuex to fetch and store the documents.

export const getters = {
  plants: (state) => state.plants
}

export const mutations = {
  SET_PLANTS(state, payload) {
    state.plants = payload
  }
}

export const actions = {
  async fetchPlants({ commit }, queryArray) {
    const docsRef = collection(db, 'plants')
    let snapshot;

    if (queryArray) {
      const q = query(docsRef, where(...queryArray))
      snapshot = await getDocs(q)
    } else {
      snapshot = await getDocs(docsRef)
    }
    const results = []

    snapshot.forEach((doc) => {
      results.push({ ...doc.data(), id: doc.id })
    })

    commit('SET_PLANTS', results)
  }
}

Then, in my ListView component I fetch the data:

export default {
   async fetch({ store }) {
    try {
      await store.dispatch('plants/fetchPlants')
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    plants() {
      return this.$store.getters['plants/plants']
    }
  }
}

And use a simple v-for loop to output the data:

<div v-for="plant in plants" :key="plant.id">
   <h3>{{ plant.name }}</h3>
   <p>{{ plant.description }}</p>
   <span v-for="(value, index) in plant.properties" :key="index">
      {{ value }}
   </span>
</div>

Notice the nested v-for loop that takes in the plant's properties. These consist of stuff like 'Needs little water', 'Needs little sun' etc.

The question

I would like to create a filter sidebar in the ListView component that allows the user to filter the plants based on their properties using a checkbox for each of them.

As you might have seen, I already have a queryArray parameter setup inside the fetchPlants action:

if (queryArray) {
  const q = query(docsRef, where(...queryArray))
  snapshot = await getDocs(q)
}

This parameter could look something like this: ['water', '==', 'Needs little water']

However, this setup only allows for 1 filter to be applied. How do I properly chain multiple where() clauses together using checkboxes?

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

If your queryArray looks like this:

const queryArray = [
  ['water', '==', 'Needs little water'],
  ['light', '==', 'Needs little sunlight'],
]

Then you'll have to add a where() for each field as shown below:

const q = query(docsRef, ...queryArray.map((item) => where(item[0], item[1], item[2])))
about 4 years ago · Juan Pablo Isaza Relatório
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