javascript - JSON对象数组不为空但不能用foreach迭代，显示零长度

Question

checkout我从 Firestore读了一本关于书的收藏create()。

数据存储在checkout声明的数组中data()。

export default {
  name: "checkout-history",
  data() {
    return {
      checkout: []
      ]
    };
  },
  created() {
    db.collection("checkout")
        .get()
        .then(querySnapshot => {
          querySnapshot.forEach(doc => {
            const data = {
              id: doc.id, // firebase document id
              book_did: doc.data().book_did,
              borrowed_date: doc.data().borrowed_date,
              copies_did: doc.data().copies_did,
              due_date: doc.data().due_date
            };
            this.checkout.push(data); // push to array
          });
        });

      console.log(this.checkout)  // show data, as in the image below

      console.log(this.checkout.length)  // get 0
      console.log(Object.keys(this.checkout).length)  // get 0
      }
      ......

当我运行时console.log(this.checkout);，控制台显示：

但是，我无法迭代它，控制台显示this.checkout.length是0

我也尝试使用 Object.keys 但没有运气。

Object.keys(this.checkout).forEach(key => {
     const keys = this.checkout[key];
     console.log(keys);
});

我真的不知道该怎么办了。

我在网上阅读了许多答案并尝试了其中的大部分，但没有一个有效。

标签： javascriptarraysjsonvue.jsgoogle-cloud-firestore

Answer 1

我猜你是在请求完成之前执行你的代码。

如果您将鼠标悬停在蓝色小i图标上，它会显示：

刚才评估了下面的值。