如何使用复选框正确链接 Firestore 查询

Question

上下文

我正在尝试创建一个带有过滤器侧边栏的文档列表视图。文档存储在 Firestore 中，我使用 Nuxt 和 Vuex 来获取和存储文档。

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

然后，在我的 ListView 组件中获取数据：

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

并使用一个简单的v-for循环输出数据：

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

注意包含植物属性的嵌套 v-for 循环。这些包括 'Needs little water'、'Needs little sun' 等

问题

我想在 ListView 组件中创建一个过滤器边栏，允许用户使用每个植物的复选框根据植物的属性过滤植物。

如您所见，我已经在 fetchPlants 操作中设置了一个 queryArray 参数：

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

此参数可能如下所示：['water', '==', 'Needs little water']

但是，此设置只允许应用 1 个过滤器。如何使用复选框正确地将多个 where() 子句链接在一起？

Answer 1

如果您的 queryArray 看起来像这样：

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

然后您必须为每个字段添加一个 where()，如下所示：

const q = query(docsRef, ...queryArray.map((item) => where(item[0], item[1], item[2])))

如何使用复选框正确链接 Firestore 查询

How to properly chain Firestore queries using checkboxes

javascript

firebase

vue.js

nuxt.js

google-cloud-firestore