I have a problem trying to use a variable inside my async function in Vue

this is in methods:

async editar(event) {
            db.collection("products").doc(event).get().then((doc) => {
                const productData = doc.data();
                console.log("Nombre: ", productData.nombre); /* this */
                console.log("Stock: ", productData.stock);
            }).catch((error) => {
                console.log("Error getting document:", error);
            });

            const alert = await alertController.create({
                cssClass: 'alertClass',
                header: 'Editar producto',
                message: '¿Qué deseas cambiar?',
                inputs: [
                    {
                        name: 'nuevoNombre',
                        type: 'text',
                        placeholder: 'Nombre',
                        value: '' /* here */
                    },
                    {
                        name: 'nuevoStock',
                        type: 'number',
                        placeholder: 'Stock'
                    }
                ],
                buttons: [
                    {
                        text: 'Cancelar',
                        role: 'cancel',
                        cssClass: 'secondary',
                        handler: () => {
                            console.log('Cancelado');
                        },
                    },
                    {
                        text: 'Aceptar',
                        handler: (data) => {
                            console.log('Se actualiza el doc: '   event);
                            db.collection("products").doc(event).update({
                                nombre: data.nuevoNombre,
                                stock: data.nuevoStock
                            }).then(() => {
                                console.log("Nuevo nombre:", data.nuevoNombre);
                                console.log("Nuevo stock:", data.nuevoStock);
                                window.location.reload();
                            }).catch((error) => {
                                console.log("Error al intentar cambiar los valores", error);
                            });
                        },
                    },
                ],
            });
            return alert.present();
        }

I want to use productData.nombre in the value inside the alertController. I was trying a lot of things but nothing works :(

I hope you can understand my question

CodePudding user response：

1. db.collection("products") seems like an async function, using await before calling it, or you will miss db data since it's not ready.

2. You should declare variable outside your function which getting db data first, due to javascript scope

Here is a similar easy example on codepen

CodePudding user response：

const productData = doc.data();

const defined productData only can be reference at cloest scope.

At your situation, scope is

db.collection("products").doc(event).get().then((doc) => {
  const productData = doc.data(); // only referenced in this scope (arrow function)
  console.log("Nombre: ", productData.nombre); /* this */
  console.log("Stock: ", productData.stock);
})

You can define variable before give it a value like this

async function editar(event) {
  let productData;
  db.collection("products")
    .doc(event)
    .get()
    .then((doc) => {
      productData = doc.data();
      console.log("Nombre: ", productData.nombre); /* this */
      console.log("Stock: ", productData.stock);
    })
    .catch((error) => {
      console.log("Error getting document:", error);
    });

  const alert = await alertController.create({
    // your code
  })
}