[Vuejs]-Why Firestore returns a Collection Reference but my program treat its as an Array?

by

1👍

✅

You are using Vuefire and in particular the declarative binding.

This is why by simply doing

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

you populate the items array (and this array is updated anytime there is a change in the collection).

So, depending on what you exactly want to do you may use one of the two approaches presented below:

<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>

If you just want to display the name of each item you can use the approach in the first v-for, where, for each item, we display the name property of the item.

If you really want to generate another array with only the names, use a computed property. Note that the second v-for shows the same result when looping over the names (computed) array.

👤Renaud Tarnec

Leave a comment