Question

我使用 vue-resource 从 firebase 中获取数据。基本上当我遍历 orders 目录下的每个对象时，我匹配该对象的 userId ，找到 users 目录下的对象，并且将其作为嵌套对象（userData）以及检索到的订单对象保存在我的本地数组中。这是我的代码：

＆＃13;

with open('InputFileName') as inf:
            txt = inf.read()
            soup = BeautifulSoup(txt)

for i in rows:
    tr_tag = soup.new_tag("tr")

    for n in i.values():
        new_tag = soup.new_tag("td")
        new_tag.string = n
        tr_tag.append(new_tag)  

    soup.find("table", {"class": "dynamicTable"}).append(tr_tag)    


# save the file again
with open('ModifiedFileName', "w") as outf:
    outf.write(str(soup))

＆＃13;

控制台中显示的对象结构非常好：

但是当我尝试时，通过//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中的嵌套对象

＆＃13;

{{ order.userData.Address }}

＆＃13;

它说<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>。我不理解它，因为我可以轻松地检索测量对象（也是嵌套对象）中的属性

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

编辑：我尝试使用Error in render function: "TypeError: Cannot read property 'Address' of undefined"代替{{ order }}，似乎{{ order.userData.Address }}对象未存储在每个userData对象中

另外，我注意到orders对象的显示方式与最初与父对象一起存储的userData对象的显示方式有些奇怪：

Answer 1

这里有两个主要问题。

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

order.userData.Address

有orders但没有userData的时间点，因为尚未检索到数据。在这种情况下，Vue会尝试呈现订单，并尝试呈现order.userData.Address，但没有userData。这就是您收到错误的原因，＆＃34;无法读取属性＆＃39;地址＆＃39;未定义＆＃34;。为了解决这个问题，你应该使用一个警卫来确保只有在Address可用时才会尝试渲染。

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

这样可以防止错误。

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

data[key].userData = userdata;

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

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

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

1 个答案: