VueJS中深度嵌套的数据对象

k2fxgqgv 于 2022-12-19 发布在 Vue.js

关注(0)|答案(5)|浏览(190)

我有一个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 }}
它将输出所有数据并且根本不抱怨。
分配深度嵌套数据对象的正确方法是什么？

vue.js

来源：https://stackoverflow.com/questions/40713905/deeply-nested-data-objects-in-vuejs

5条答案

按热度按时间

6fe3ivhb1#

如果您发现@saurabh answer不起作用，那么您可能需要检查一下您是如何将新值赋给对象的。
首先是数据被意外设置为字符串？因此{{ info }}工作（或看起来工作）。可能值得使用response.json()来设置数据。
如果不是这样，那么错误可能会产生，因为你设置的数据不是React性的。当你分配一个嵌套对象时，你可能需要使用不同的方法来使它React性，即

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

或

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

查看：https://v2.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)

赞(0）回复(0）举报 2022-12-19

r55awzrz2#

这里的实际问题是生命周期问题，路由守卫beforeRouteEnter是在组件创建后调用的，因此抛出错误，因为当组件试图访问数据时，数据不存在。

赞(0）回复(0）举报 2022-12-19

pwuypxnk3#

这里必须使用condition rendering，这可以在Vue指令v-if的帮助下很容易地完成。如果数据没有填充，而您试图访问它，它可能给予出错，因此v-if将只在数据存在时呈现HTML的这一部分。
您需要执行以下操作：

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

赞(0）回复(0）举报 2022-12-19

gz5pxeao4#

在我的场景中，我必须使用一个 Package 了Object.assign的Vue.set：
我正在尝试在Vuex mutation中设置state.workouts[state.workoutDate].isDone

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

赞(0）回复(0）举报 2022-12-19

ztmd8pv55#

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

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

或

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

赞(0）回复(0）举报 2022-12-19

我来回答

VueJS中深度嵌套的数据对象

5条答案

相关问题

热门标签

最新问答