Блог

У меня возникла проблема при попытке использовать переменную внутри моей асинхронной функции в Vue

это в методах:

 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();
    }
}
 

Я хочу использовать ProductData.nombre в значении внутри AlertController. Я много чего перепробовал, но ничего не работает 🙁

Надеюсь, вы понимаете мой вопрос

 const productData = doc.data();
 

const определенная productData ссылка может быть только в области cloest.

В вашей ситуации область действия

 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);
})
 

Вы можете определить переменную, прежде чем присваивать ей значение, подобное этому

 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
  })
}
 

1. db.collection("products") похоже на асинхронную функцию, используемую await перед ее вызовом, иначе вы пропустите данные БД, поскольку они не готовы.
2. Вы должны объявить переменную вне вашей функции, которая сначала получает данные БД, из-за области видимости javascript

Вот аналогичный простой пример в codepen