Resolving an Error 400 with Firebase/Firestore and VueJS - firebase

Question

I am attempting to write an ordering app using Google Firebase as the database to store everything. I attempted to test the connection but keep getting GET and POST HTTP 400 errors when I submit test data.
I have installed v8.0.0 via NPM. My firebase.js file is as follows:
import firebase from 'firebase/app'
import 'firebase/firestore'
import { firebaseConfig } from '#/firebaseConfig';
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export const dbMenuRef = db.collection("menu");
Fire security purposes I keep the object Google generates for configuration containing the keys and such in a separate file. I even tried putting the object in the firebase.js file and still got these errors.
The data is structured as follows:
newOrder: {
customerName: 'John Doe',
customerPhone: '1-800-DRUIDIA',
items:[{
itemUPC: '1234567890',
itemDesc: 'A generic item',
itemDist: 'The one we always use'
}, {
itemUPC: '0987654321',
itemDesc: 'Another Generic Item',
itemDist: 'The other one we use'
}]
}
Data is two-way bound to a form. This is working properly and I have the newOrder object displayed in the component. This is working just fine as the JSON looks like above.
The following VueJS method is triggered by clicking a "Submit Order" button.
addOrder() {
dbMenuRef.add(this.newOrder)
}
Edit: I am using Firefox Developer Edition latest version.
Second Edit: This apparently works in Chrome, but not Firefox DE.

Answer 1

It looks like you are passing array as a value to items key. If you use dbMenuRef.add, you might want to add as sub-collections. Instead, you can use .set if you want to have the entire document added (please refer the documentation here. Can you try:
addOrder() {
dbMenuRef
.doc(this.orderID)
.set(this.newOrder)
}