如何在 Vue.js 上使用这个变量？答案

【问题标题】：How can I use this variable on Vue.js?如何在 Vue.js 上使用这个变量？
【发布时间】：2022-01-13 04:23:18
【问题描述】：

尝试在 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。我尝试了很多东西，但没有任何效果:(

希望你能理解我的问题

【问题讨论】：

标签： vue.js ionic-framework

【解决方案1】：

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

【讨论】：

我试试这个，但我得到下一个错误：Stock.vue?e81a:87 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'nombre') 我输入了值：productData.nombre
我解决了这个问题，而不是尝试使用“值”中的变量。还是谢谢！

【解决方案2】：

db.collection("products") 看起来像一个异步函数，在调用它之前使用await，否则你会因为它还没有准备好而错过数据库数据。
由于javascript scope，你应该在你的函数之外声明变量首先获取数据库数据

这是codepen上的一个类似的简单示例

【讨论】：