Firebase Vue.js-即使对象存在，也无法读取属性

我使用vue资源从firebase获取数据。基本上，当我循环遍历orders目录下的每个对象时，我会匹配该对象的用户ID，在users目录下找到该对象，并将其作为嵌套对象userData与检索到的orders对象一起保存在本地数组中。这是我的密码：

//从订单中检索对象 这是$http.get'https://nots-76611.firebaseio.com/Orders.json“.然后是函数数据{ 返回data.json； }.Then函数数据{ var ordersArray=[]； 让我们输入数据{ 数据[key].id=key； 数据[key].measurementsArray=Object.entriesdata[key].measurements.sort； //根据每个orders对象的用户ID检索特定用户 这是$http.get'https://nots-76611.firebaseio.com/Users/'+data[key].userId+'.json'.thenfunctionuserdata{ 返回userdata.json； }.thenfunctionuserdata{ data[key].userData=userData；//存储对象 }; ordersaray.pushdata[key]；//沿着userData传递对象 } this.orders=ordersArray； console.logthis.orders；

---

}; 这里有两个主要问题

首先，异步检索数据，这意味着在首次呈现组件时数据不存在。在您使用的模板中

order.userData.Address

有一个时间点，有订单但没有userData，因为数据尚未检索。在这种情况下，Vue尝试呈现订单，并尝试呈现order.userData.Address，但没有userData。这就是为什么会出现错误，无法读取未定义的属性“Address”。为了解决这个问题，您应该使用一个保护来确保只在地址可用时才尝试呈现地址

{{orders.userData && orders.userData.Address}}

这将防止出现错误

有一个您可能尚未注意到的次要错误。用户数据不是被动的。这是因为在将对象添加到数据后，将属性添加到对象时。代码正在设置userData，如下所示：

这发生在orders数组添加到Vue之后，因为它是在异步调用中执行的。相反，你应该使用

this.$set(data[key], 'userData', userdata)

---

这里有两个主要问题

首先，异步检索数据，这意味着在首次呈现组件时数据不存在。在您使用的模板中

order.userData.Address

有一个时间点，有订单但没有userData，因为数据尚未检索。在这种情况下，Vue尝试呈现订单，并尝试呈现order.userData.Address，但没有userData。这就是为什么会出现错误，无法读取未定义的属性“Address”。为了解决这个问题，您应该使用一个保护来确保只在地址可用时才尝试呈现地址

{{orders.userData && orders.userData.Address}}

这将防止出现错误

有一个您可能尚未注意到的次要错误。用户数据不是被动的。这是因为在将对象添加到数据后，将属性添加到对象时。代码正在设置userData，如下所示：

这发生在orders数组添加到Vue之后，因为它是在异步调用中执行的。相反，你应该使用

this.$set(data[key], 'userData', userdata)

---

只需尝试{{order}}而不是{{order.userData.Address}}，看看它显示了什么。@Pradeepb我无法对整个事情进行评论。但基本上，userData对象没有正确存储：只需尝试{{order}而不是{{order.userData.Address}}，然后查看它显示了什么。@Pradeepb我无法对整个内容进行注释。但基本上，userData对象没有正确存储：谢谢，this.$setdata[key]，'userData'，userData保存了我的一天。不过，出于好奇，我想问一下，您给出的保护代码片段。。。和你放在v-if里的一样吗？我从没想过条件表达式可以用这种方式呈现。如果order.userData和order.userData.Address都为true，这是否就像对vue所说的呈现这些数据一样？这个概念叫什么？我想研究一下它和它的可能性。@Kaddy03是的，它和使用v-if差不多。警卫只是一个javascript。如果表达式的第一部分为falsy，则返回第一个表达式，否则返回第二个表达式。当orders.userData未定义时，它将返回未定义，并且不会计算第二个表达式。这就防止了错误，因为没有任何东西可以渲染，所以没有任何东西可以渲染。谢谢你{{data&&data.property}这很有用，可以节省我的时间，但我仍然不明白它是如何工作的。&&不是指示返回true或false的条件吗？但是它返回data.property。@GTHell我能理解你的困惑。有两个概念在起作用。首先，在javascript中，&&表达式的计算结果位于表达式的右侧

---

如果第一个值为true，则为。其次，布尔表达式短路，这意味着，如果表达式的第一部分不是真的，第二部分甚至不会得到计算，因为表达式显然是假的。这允许编写一个简短的if语句，这在模板之类的事情中很有用。您可以直接在控制台中尝试。尝试在控制台中键入1&&2，结果将是2。@Bert我明白了！0&&1返回0哈哈。我明白人们为什么取笑javascript了。谢谢，这个。$setdata[key]，'userData'，userData保存了我的一天。不过，出于好奇，我想问一下，您给出的保护代码片段。。。和你放在v-if里的一样吗？我从没想过条件表达式可以用这种方式呈现。如果order.userData和order.userData.Address都为true，这是否就像对vue所说的呈现这些数据一样？这个概念叫什么？我想研究一下它和它的可能性。@Kaddy03是的，它和使用v-if差不多。警卫只是一个javascript。如果表达式的第一部分为falsy，则返回第一个表达式，否则返回第二个表达式。当orders.userData未定义时，它将返回未定义，并且不会计算第二个表达式。这就防止了错误，因为没有任何东西可以渲染，所以没有任何东西可以渲染。谢谢你{{data&&data.property}这很有用，可以节省我的时间，但我仍然不明白它是如何工作的。&&不是指示返回true或false的条件吗？但是它返回data.property。@GTHell我能理解你的困惑。有两个概念在起作用。首先，在javascript中，如果第一个值为true，&&表达式将计算到表达式的右侧。其次，布尔表达式短路，这意味着，如果表达式的第一部分不是真的，第二部分甚至不会得到计算，因为表达式显然是假的。这允许编写一个简短的if语句，这在模板之类的事情中很有用。您可以直接在控制台中尝试。尝试在控制台中键入1&&2，结果将是2。@Bert我明白了！0&&1返回0哈哈。我明白人们为什么取笑javascript了。