Vue js 3 将产品添加到 Firebase 时出错

Question

I'm learning Vuejs while I'm creating a website for our store, and I have a problem connecting with Firebase, Authentication works fine, but CRUD doesn't, it gives me this error:

Uncaught SyntaxError: Unexpected reserved word (at Products.vue...)

Versions:

• vue: 3.2.36
• firebase: 9.8.3

Code:

import { db } from '../main';
import { collection, addDoc } from "firebase/firestore";

export default {
  name: "Products",
  props: {
    msg: String
  },
  data() {
    return {
      product: {
        name: null,
        price: null
      }
    }
  },
  methods: {
    saveData() {
      try {
        const docRef = await addDoc(collection(db, "products"), this.product);
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }

    }
  }
};

Answer 1

It must be due to some error in your code. Whenever you get such an error, the standard procedure is to check your code to point out which line is exactly throwing the error.

Also, I notice you are using 'await' without the 'async' function. 'await' makes a function asynchronous, so it must be declared inside an async function. Use of async await in the function is a shorthand for chaining promises, equivalent to calling a chain of then functions and returning a promise in each of the callbacks in the then function.

Also, you may refer to this documentation which guides how to use async and await in Vue.js.