我如何在Vue.js上使用這個變數？

我在嘗試在 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();
    }
}

我想在 alertController 內的值中使用 productData.nombre。我嘗試了很多東西，但沒有任何效果:(

我希望你能理解我的問題

uj5u.com熱心網友回復：

const productData = doc.data();

const定義productData只能在最接近的范圍內參考。

在您的情況下，范圍是

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

uj5u.com熱心網友回復：

1. db.collection("products")看起來像一個異步函式，await在呼叫它之前使用，否則你會錯過資料庫資料，因為它沒有準備好。

2. 由于javascript 范圍，您應該在首先獲取資料庫資料的函式之外宣告變數

這是關于codepen 的一個類似的簡單示例

標籤：Vue.js 离子框架

上一篇：當watch函式內資料改變時，dom不更新

下一篇：VueJS無需復雜的v-if陳述句即可獲得異步狀態