Deeply nested data objects in VueJS

Question

I've got a VueJs front end that fetches some data from an API. The app uses vue-router.

The data fetched for one component is similar to the following:

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

The component is instantiated with a data object called info:

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

In the beforeRouteEnter hook, the data is fetched by a vue-resource http.get and info is set to the body of the result like this:

vm.info = result.body

When the component renders, the following errors are produced:

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

In the template, the data is referenced in curly braces as per usual, however, if I just reference info in the template like this:

{{ info }}

it will output all of the data and not complain at all.

What is the correct way to assign a deeply nested data object?

I don't think you can do this in beforeRouteEnter hook. As it's said in the doc, does NOT have access to this` component instance. How about changing the hook to created`? — Kane Blueriver
– Kane Blueriver, Commented Nov 21, 2016 at 9:01
@kxxoling Typo. The object is set in a callback in the beforeEnterRoute function. I've edited the post. — oorst
– oorst, Commented Nov 21, 2016 at 10:33

tony19 · Accepted Answer · 2022-07-15 05:43:22Z

If you are finding @saurabh answer is not working then you may need to check how you are assigning the new values to your object.

Firstly is the data being accidiently set as a string? hence {{ info }} working (or appearing to). May be worth using response.json() to set the data.

If thats not it then the error may be produced as the data you have set is not reactive. As you are assigning a nested object you may need to use different methods to make it reactive, i.e

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

or

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

check out: https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

because your response is an object you may want to break out your data into corresponding params, i.e.

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

then you can assign name & email as you expected (info.email = ...).

For info.order you'd use Vue.set:

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

oorst · Accepted Answer · 2018-07-06 18:55:53Z

1

The actual issue here is a life cycle one. The route guard beforeRouteEnter is called after the component is created so the error is thrown because the data isn’t there when the component tries to access it.

answered Jul 6, 2018 at 18:55

oorst

9792 gold badges10 silver badges32 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 03:26:41Z

1

You have to use condition rendering here, which you can easily do with help of Vue directive v-if. It may give error if the data is not populated and you try to access it, so v-if will render that part of HTML only when data is present.

You need to do something like following:

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

edited Jul 16, 2022 at 3:26

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 21, 2016 at 6:34

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

4 Comments

oorst Over a year ago

I've actually tried that. It stills throws the same errors when evaluating the properties that aren't available.

Saurabh Over a year ago

@oorst can you include your HTML.

JJPandari Over a year ago

@oorst did you forget to convert the response body string to js objects with res.json() (vue-resource api) or JSON.parse(res.body)?

oorst Over a year ago

Doesn't vue resource automatically return JS objects?

musa · Accepted Answer · 2022-12-14 06:25:19Z

1

In my scenario, I had to use one Vue.set that wrapped an Object.assign:

I'm trying to set state.workouts[state.workoutDate].isDone in a Vuex mutation

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

edited Dec 14, 2022 at 6:25

musa

1,46518 silver badges37 bronze badges

answered Jul 6, 2018 at 15:21

kevnk

19.2k3 gold badges31 silver badges30 bronze badges

Comments

Leonardo Filipe · Accepted Answer · 2020-06-22 23:27:15Z

0

Force update object setting a new object with same content

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

or

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

answered Jun 22, 2020 at 23:27

Leonardo Filipe

1,76216 silver badges9 bronze badges

Collectives™ on Stack Overflow

Deeply nested data objects in VueJS

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related