javascript - 为什么 Firestore 返回集合引用，但我的程序将其视为数组？

Question

所以我在 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 Collection”但是为什么应用程序会完美地呈现数据，就像它是一个简单的数组一样？

Answer 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 code>，我们显示 item 的 name 属性。

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