为什么 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 集合”时，但是为什么应用程序会完美呈现数据，就像它正在一个简单的数组？

【问题讨论】：

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

【解决方案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（计算）数组时显示相同的结果。

【讨论】：