将 Firestore 文档 ID 推送到数组答案

【问题标题】：Pushing Firestore document IDs to array将 Firestore 文档 ID 推送到数组
【发布时间】：2021-03-27 16:10:43
【问题描述】：

我对 Vuejs 和 Firestore 还很陌生，目前正在从事我的第一个更大的项目。我的 Firestore 中有 1 个集合，其中包含 3 个文档。我正在尝试检索文档 ID 并将它们保存到数组中。我的组件如下所示：

<template>
  <div class="main">
    <button @click="getIds" class="nextBtn">Next</button>
  </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex'

export default {

setup() {
  const store = useStore();
  const questdb = computed(() => store.state.questdb);
  let idArray = [];

  function getIds() {
    this.questdb.onSnapshot(function(doc) {      
      doc.forEach(doc => {
        try{
          this.idArray.push(doc.id);
        }
        catch(error) {
        console.log("Error: ", error);
        }              
      })
    })
  }
  return {
    store,
    questdb,
    idArray,
    getIds
  }
},
  methods: {
  }
}
</script>

我得到的错误如下：

TypeError: Cannot read property 'push' of undefined

当我只是 console.log() 文档 ID 时，它工作正常。

我想问题是，这些数据不能简单地推入一个数组，或者我对如何从 Firestore 检索数据缺乏一些基本的了解。

【问题讨论】：

您是否在某处定义了idArray？请添加更完整的代码。
还有这个函数，它在哪里？在methods 部分？
是的，我做了，将它添加到顶部。我之前在方法部分有该函数，但将其移至“setup()”部分并返回其名称。
我们可以得到整个组件吗？这真的没有帮助。如果它是普通的 javascript this.idArray 应该只是 idArray。但由于它是一个 vue 组件（我假设）它可能会有所不同。
现在添加了整个组件

标签： javascript vue.js google-cloud-firestore

【解决方案1】：

idArray 之前不需要'this'，'this' 不包含 idArray 所以结果是'undefined'。用这种方法试试吧。

function getIds() {
this.questdb.onSnapshot(function(doc) {      
  doc.forEach(doc => {
    try{
      idArray.push(doc.id);
    }
    catch(error) {
    console.log("Error: ", error);
    }              
  })
})

}

查看 Vue 组合 API 文档了解更多信息。 https://v3.vuejs.org/api/composition-api.html#setup

【讨论】：