VueJS 中深度嵌套的数据对象

Question

我有一个 VueJs 前端，可以从 API 获取一些数据。该应用程序使用 vue-router。

为一个组件获取的数据类似于以下内容：

{
  name: ...,
  email: ...,
  order: {
    data: {
      line_items: [
        {
          quantity: ...
        }
      ]
    }
  }
}

该组件使用名为 info 的数据对象进行实例化：

data () {
  return {
    info: {}
  }
}

在beforeRouteEnter钩子中，数据由 vue-resource http.get 获取，并将 info 设置为结果正文，如下所示：

vm.info = result.body 

当组件渲染时，会产生以下错误：

TypeError: undefined is not an object (evaluating _vm.order.data.line_items')

在模板中，数据像往常一样在大括号中引用，但是，如果我只是像这样引用模板中的信息：

{{ info }}

它会输出所有数据并且根本不抱怨。

分配深层嵌套数据对象的正确方法是什么？

Answer 1

您必须在这里使用条件渲染，这可以借助 Vue 指令 v-if 轻松完成。如果数据未填充并且您尝试访问它，则可能会出现错误，因此v-if仅当数据存在时才会呈现 HTML 的该部分。

您需要执行如下操作：

<div v-if="info.order">
  <span>
    {{ info.order }}
  </span>
</div>