0

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

问题出在下一行：

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

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

问题是我只想获取该集合中每个对象的字段（例如，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”时，但是为什么应用程序可以完美地呈现数据，就像它是一个简单的数组一样？

4

1 回答 1

1

您正在使用Vuefire，尤其是声明式绑定。

这就是为什么通过简单地做

  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。

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

于 2019-10-18T19:40:53.540 回答