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

Question

我使用vue-resource从获取数据firebase。基本上，当我通过下订单目录中的每个对象的循环，我匹配对象的用户id，找到用户目录下的对象，和我的本地阵列上保存为一个嵌套的对象（用户数据）以及检索到的订单对象。这里是我的代码：

//retrieve objects from orders 
 
this.$http.get('https://nots-76611.firebaseio.com/Orders.json').then(function(data){ 
 
     return data.json(); 
 
    }).then(function(data){ 
 
     var ordersArray = []; 
 
     for (let key in data){ 
 
      data[key].id = key; 
 
      data[key].measurementsArray = Object.entries(data[key].measurements).sort(); 
 
      //retrieve a specific user based on the userId of each orders object 
 
      this.$http.get('https://nots-76611.firebaseio.com/Users/' + data[key].userId + '.json').then(function(userdata){ 
 
       return userdata.json(); 
 
      }).then(function(userdata){ 
 
       data[key].userData = userdata; //store the object 
 
      }); 
 
      ordersArray.push(data[key]); //pass the object along the userData 
 
     } 
 
     this.orders = ordersArray; 
 
     console.log(this.orders); 
 
    });

结构在控制台中显示的对象是完全没有问题：

但是当我尝试，访问DOM中嵌套对象通过{{ order.userData.Address }}：

<tr v-for="order in orders" 
 
<dialog class="mdl-dialog" ref="userDialog"> 
 
        <h4 class="mdl-dialog__title">Customer's Information</h4> 
 
        <div class="mdl-dialog__content"> 
 
        {{ order.userData.Address }} 
 
        </div> 
 
        <div class="mdl-dialog__actions"> 
 
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" v-on:click="closeUser(ndx)"> 
 
         OK 
 
        </button> 
 
        </div> 
 
       </dialog> 
 
</tr>

它说Error in render function: "TypeError: Cannot read property 'Address' of undefined"。我不明白，因为我可以很容易地检索测量对象（这也是一个嵌套的对象）中的属性

我在检索过程中搞砸了吗？或者在DOM渲染？

编辑： 我尝试使用{{ order }}代替{{ order.userData.Address }}，它似乎像userData对象不是存储在每个orders对象

而且，我发现了一些奇怪怎么userData对象从不同的显示这是最初的父对象一起存储在那里measurements对象：

Answer 1

这里有两个主要的问题。

首先，数据被检索异步这意味着，组件时第一渲染它不存在。在模板中使用

order.userData.Address 

有一个时间点时，有orders但没有userData，因为数据尚未恢复。在这种情况下，Vue尝试渲染订单，并尝试渲染order.userData.Address，但没有userData。这就是为什么你得到错误，“不能读取属性'地址'的未定义”。为了解决这个问题，你应该使用警卫来确保只在可用时尝试渲染Address。

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

这将防止错误。

您可能还没有注意到的次级错误。 userData没有反应。原因是因为Vue cannot detect属性被添加到对象后该对象已被添加到数据。该代码是设置userData像这样：

data[key].userData = userdata; 

和出现这种情况后，因为它是在一个异步呼叫进行orders阵列已被添加到所述的Vue。相反，您应该使用

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