为啥 Firestore 返回一个集合引用，但我的程序将其视为一个数组？

Posted 2023-02-22

【中文标题】为啥 Firestore 返回一个集合引用，但我的程序将其视为一个数组？

【英文标题】：Why Firestore returns a Collection Reference but my program treat its as an Array?为什么 Firestore 返回一个集合引用，但我的程序将其视为一个数组？

【发布时间】：2020-02-15 18:16:04

【问题描述】：

所以我在 Vue 上做了一个简单的应用程序。然后我意识到将它与在线数据库连接起来会很酷，所以我想我会尝试 Firebase（我的后端知识很少，所以我想要一些快速且“简单”的东西）。

问题出在下一行：

firestore () 
      return 
        items: db.collection('items')
      
    

当我这样做时，位于任何 vue 组件的通常 data() 中的原始数组 items 会被该集合的对象填充。

问题是我只想获取该集合中每个对象的字段（例如，每个待办事项的字段name），而不是整个对象。我看了看，似乎没有简单的方法来做“db.collection('items).name”

所以我想在做一个函数将数据放入一个数组中，然后将其传递给项目：

function cleanRawData(objectToClean)
      var cleanedArr = [];

      for(let i=0; i<objectToClean.length; i++)
        cleanedArr.push(objectToClean[i].name)
      

      return cleanedArr


 data () 
      return 
          
          items: [],

        
    ,
    firestore () 
      let itemObject = db.collection('items');
      return 
       items: cleanRawData(itemObject)
      
    

我不知道我是否在那里犯了很多错误，但关键是我想“清理”Firestore 给我的东西。

问题是我什至无法尝试该功能，因为当我 console.log(db.collection('items')) 没有给我一个对象数组而是一个“Firestore 集合”时，但是为什么应用程序会完美呈现数据，就像它正在一个简单的数组？

【参考方案1】：

您正在使用Vuefire，尤其是declarative binding。

这就是为什么简单地做

  firestore: 
    items: db.collection('items')
  

您填充items 数组（并且该数组会在集合发生变化时更新）。

---

因此，根据您的具体目标，您可以使用以下两种方法之一：

<template>
  <div>
    <ol>
      <li v-for="i in items"> i.name </li>
    </ol>

    <ol>
      <li v-for="n in names"> n </li>
    </ol>
  </div>
</template>

<script>
import  db  from "../firebase";
export default 
  data() 
    return 
      items: []
    ;
  ,

  firestore: 
    items: db.collection('items')
  ,
  computed: 
    names() 
      return this.items.map(item => 
        return item.name;
      );
    
  
;
</script>

如果您只想显示每个item 的名称，您可以使用第一个v-for 中的方法，其中对于每个item，我们显示item 的name 属性。

如果您真的想生成另一个仅包含名称的数组，请使用computed property。请注意，第二个v-for 在循环names（计算）数组时显示相同的结果。