Contexto

Estoy tratando de crear una vista de lista de documentos con una barra lateral de filtro. Los documentos se almacenan en Firestore y estoy usando Nuxt con Vuex para buscar y almacenar los documentos.

 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) } }

Luego, en mi componente ListView busco los datos:

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

Y use un bucle v-for simple para generar los datos:

 <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>

Observe el bucle v-for anidado que toma las propiedades de la planta. Estos consisten en cosas como 'Necesita poca agua', 'Necesita poco sol', etc.

La pregunta

Me gustaría crear una barra lateral de filtro en el componente ListView que permita al usuario filtrar las plantas según sus propiedades usando una casilla de verificación para cada una de ellas.

Como habrás visto, ya tengo una configuración de parámetros queryArray dentro de la acción fetchPlants :

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

Este parámetro podría verse así: ['water', '==', 'Needs little water']

Sin embargo, esta configuración solo permite aplicar 1 filtro. ¿Cómo encadeno correctamente varias cláusulas where() usando casillas de verificación?