为什么 Firestore returns 一个集合引用，但我的程序将其视为一个数组？

Question

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

问题在下一行：

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

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

问题是我只想获取该集合中每个对象的字段（例如每个待办事项的字段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)
      }
    }

好吧，我不知道我是否在那里犯了很多错误，但关键是我想 "clean" Firestore 给我的东西。

问题是我什至无法尝试该功能，因为当我 console.log(db.collection('items')) 没有给我一个对象数组而是 "Firestore Collection" 但是为什么应用程序会完美呈现数据，例如如果它是一个简单的数组？

Answer 1

您正在使用 Vuefire and in particular the 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，我们显示 name 属性的 item.

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

为什么 Firestore returns 一个集合引用，但我的程序将其视为一个数组？

Why Firestore returns a Collection Reference but my program treat its as an Array?

javascript

firebase

vue.js

vuefire

google-cloud-firestore