Question

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

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

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

使用名为info：

的数据对象实例化组件

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

在beforeRouteEnter挂钩中，数据由vue-resource http.get获取，信息设置为结果的主体，如下所示：

vm.info = result.body

当组件呈现时，会产生以下错误：

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

在模板中，数据按照常规用大括号引用，但是，如果我只是在模板中引用信息，如下所示：

{{ info }}

它会输出所有数据而不会抱怨。

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

Answer 1

你必须在这里使用condition rendering，你可以在Vue指令v-if的帮助下轻松完成。如果未填充数据并且您尝试访问它，则可能会出错，因此Range("B3").Select Range(Selection, Selection.End(xlDown)).Select Var = Selection.End(xlDown).Select仅在数据存在时才会呈现HTML的那部分。

您需要执行以下操作：

v-if

Answer 2

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

首先，数据是否被设置为字符串？因此{{info}}工作（或出现）。值得使用response.json()来设置数据。

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

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: {},
    },
  }
}

然后你可以指定名称＆amp;按预期发送电子邮件（info.email = ...）。

对于info.order，您可以使用Vue.set：

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

Answer 3

在我的场景中，我必须使用一个Vue.set来包裹Object.assign：

我正在尝试在Vuex mutation中设置state.workouts[state.workoutDate].isDone

toggleWorkout(state, isDone) {
    Vue.set(
        state.workouts,
        state.workoutDate,
        Object.assign({}, state.workouts[state.workoutDate], { isDone: isDone })
    );
},

```

Answer 4

这里的实际问题是生命周期。创建组件后将调用路由保护beforeRouteEnter，因为当组件尝试访问数据时数据不存在，所以引发了错误。

Answer 5

强制更新对象设置内容相同的新对象

<button @click="my.object.nested.variable = 2; my = Object.assign({}, my);">

或

this.my.object.nested.variable = 2;
this.my = Object.assign({}, this.my);

在VueJS中深层嵌套数据对象

5 个答案: