Whenever the function is triggered (on click), I aim to include a new document. Although it functions with .set(), my goal is for a new document to be created each time the form is submitted.
The current error code I am encountering is:
https://i.sstatic.net/4Saq3.png
I initially suspected there might be an issue with my connection, but everything seems to be in order.
This is my database connection file:
import firebase from 'firebase'
import 'firebase/firestore'
let config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Obtain a Firestore instance
export const db = firebase.initializeApp(config).firestore()
My attempts to search for solutions online have been unsuccessful thus far.
AddProduct.vue script section only:
<script>
/*eslint-disable-line*/import { db } from '../Database';
import firebase from 'firebase';
export default {
firestore: {
Products: db.collection('Products')
},
data() {
return {
sort: ['Fruit', 'Vegetable'],
fruit: ['Apple', 'Bananan', 'Grape', 'Kiwi', 'Lemon', 'Mango', 'Orange', 'Pear', 'Pineapple', 'Strawberry', 'Watermelon'],
vegetable: ['Cabbage', 'Radish', 'Carrot', 'Parsnip', 'Lettuce', 'Green bean', 'Aubergine', 'Tomato', 'Cucumber', 'Sweet pepper'],
quality: [1,2,3,4,5,6,7,8,9,10],
cours: ['€', '$', '£', '₺'],
random: Math.floor(Math.random() * 1000000),
addProducts: {
catogorie: '',
product: '',
quality: '',
availability: '',
cours: '',
price: '',
firstName: '',
lastName: '',
companyName: '',
email: '',
location: '',
country: '',
}
}
},
methods: {
async add() {
var currentUser = firebase.auth().currentUser.uid
const res = await db.collection('Products').doc(currentUser + this.random).add({
addProducts: this.addProducts
});
console.log(res)
}
},
created() {
console.log(this.random)
}
}
</script>
I may not be skilled at drawing, but the red blocks are meant to represent new documents generated by the same form with different data attributes.