Почему Firestore возвращает ссылку на коллекцию, а моя программа рассматривает ее как массив? - PullRequest
Новая
       104

Почему Firestore возвращает ссылку на коллекцию, а моя программа рассматривает ее как массив?

0 голосов
/ 18 октября 2019

Итак, я сделал простое приложение на 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», однако, почему тогда приложение прекрасно отображает данные, как будто это простаямассив?

1 Ответ

1 голос
/ 18 октября 2019

Вы используете 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 (вычисляется).

...