[Vuejs]-Firebase db with vuejs : default.collection is not a function

by

0👍

First you didn’t initialized your firebase app. To do so :

//firebase.js

const db = firebase.initializeApp(fb)
export {db.firestore(),fb}

Then on your products page or component you wrote :

//products.vue

db.collection("Products").add(this.Product)...

this.Product object doesn’t exist so it should be this.aon

//products.vue

db.collection("Products").add(this.aon)...

For more info : https://firebase.google.com/docs/firestore/quickstart

0👍

As per the documentation here and here you need to use the .set(), .add(), .update() and .doc() methods like this.

When you use set() to create a document, you must specify an ID for the document to create. For example:

await db.collection('cities').doc('new-city-id').set(data);

to let Cloud Firestore auto-generate an ID for you. You can do this by calling add()

// Add a new document with a generated id.
const res = await db.collection('cities').add({
  name: 'Tokyo',
  country: 'Japan'
});

console.log('Added document with ID: ', res.id);

In some cases, it can be useful to create a document reference with an auto-generated ID, then use the reference later. For this use case, you can call doc()

const newCityRef = db.collection('cities').doc();

// Later...
const res = await newCityRef.set({
  // ...
});

To update some fields of a document without overwriting the entire document, use the update() method:

const cityRef = db.collection('cities').doc('DC');

// Set the 'capital' field of the city
const res = await cityRef.update({capital: true});

Leave a comment