vue.js - VueJS 中深度嵌套的数据对象

Question

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

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

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

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

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

在 beforeRouteEnter钩子(Hook)，数据由 vue-resource http.get 获取，信息被设置为结果的主体，如下所示:

vm.info = result.body 

当组件呈现时，会产生以下错误:
TypeError: undefined is not an object (evaluating _vm.order.data.line_items')
在模板中，数据照常在花括号中引用，但是，如果我像这样在模板中引用信息:
{{ info }}
它将输出所有数据并且根本不会提示。

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

Answer 1

如果您发现 @saurabh 答案不起作用，那么您可能需要检查如何将新值分配给您的对象。

首先，数据是否被意外设置为字符串？因此 {{ info }} 工作(或似乎)。可能值得使用 response.json()来设置数据。

如果不是这样，那么可能会产生错误，因为您设置的数据不是 react 性的。当您分配嵌套对象时，您可能需要使用不同的方法使其具有反应性，即

Vue.set(vm.someObject, 'b', 2)

或者

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

退房: https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

因为您的响应是一个对象，您可能希望将数据分解为相应的参数，即

data () {
  return {
    info: {
      name: '',
      email: '',
      order: {},
    },
  }
}

然后您可以按预期分配名称和电子邮件(info.email = ...)。

对于 info.order你会用 Vue.set :

Vue.set(this.info, 'order', result.body.order)