[Vuejs]-Problems with the integration of Vue 3 and Firestore

by

0👍

✅

const books = collection(db, 'books')

class BooksService {
  getAll () {
    return books
  }
}

From here it seems you are returning a CollectionReference instead of array of documents which is being assigned to this.books in your component. Try refactoring to this:

import { collection, getDocs } from "firebase/firestore"
const books = collection(db, 'books')

class BooksService {
  getAll () {
    return getDocs(books).then(qSnap => {
        return qSnap.docs.map(d => ({id: d.id, ...d.data()}))
    })
  }
}

Leave a comment