Vue.js cannot access to nested properties of data object

Question

In Vue.js I fetch some data of a json-file like this:

export default {
    data () {
       return {
           data: []
       }   
    },
    created () {
        this.fetchData();    
    },
    methods: {
        fetchData () {
            $.getJSON('data/api.json', function(el) {
                this.data = el;
            }.bind(this)),
        }
    }
}

The fetched data has the following structure:

{
    time: '17:00',
    pick: {
        box: {
            single: 1,
            multi: 2
        }    
    }
}

When I try to access to {{ data.pick.box }} or {{ data.pick.box.single }} in my component, I always get this error message:

vue.js?3de6:2963 Uncaught TypeError: Cannot read property 'box' of undefined
at Proxy.render (eval at <anonymous> (app.js:126), <anonymous>:4:46)
at VueComponent.Vue._render (eval at <anonymous> (app.js:139), <anonymous>:2954:22)
at VueComponent.eval (eval at <anonymous> (app.js:139), <anonymous>:2191:21)
at Watcher.get (eval at <anonymous> (app.js:139), <anonymous>:1656:27)
at new Watcher (eval at <anonymous> (app.js:139), <anonymous>:1648:12)
at VueComponent.Vue._mount (eval at <anonymous> (app.js:139), <anonymous>:2190:19)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:139), <anonymous>:5978:15)
at VueComponent.Vue$3.$mount (eval at <anonymous> (app.js:139), <anonymous>:8305:16)
at init (eval at <anonymous> (app.js:139), <anonymous>:2502:11)
at createComponent (eval at <anonymous> (app.js:139), <anonymous>:4052:9)

Is there any restriction for accessing deep nested objects? When I call {{ data }}, for example, I get the whole data structure displayed as a string correctly.

As mentioned by Nora, here is the fiddle: jsfiddle

When rendering for the first time data is [], and does not have any .pick.box property. — sobolevn
– sobolevn, Commented Jan 2, 2017 at 9:53
You can use v-if as I have mentioned in my answer, if you dont want to use one extra variable. — Saurabh
– Saurabh, Commented Jan 2, 2017 at 10:23

Nora · Accepted Answer · 2017-01-02 09:54:21Z

10

You can try waiting for data to finish loading to display it in your template:

export default {
    data () {
       return {
           loading: false,
           data: []
       }   
    },
    created () {
        this.fetchData();    
    },
    methods: {
        fetchData () {
            this.loading = true;
            $.getJSON('data/api.json', function(el) {
                this.data = el;
                this.loading = false;
            }.bind(this)),
        }
    }
}

In template:

<template>
  <div v-if="!loading">
    {{ data.pick.box }}
  </div>
</template>

answered Jan 2, 2017 at 9:54

Nora

3,2812 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M.Islam Over a year ago

I had the same problem but this solution didn't work for me. I just changed lifecycle hook from mounted() to create() and it worked. Anyway, Thanks!

tony19 · Accepted Answer · 2022-07-15 20:28:51Z

8

You are getting this error, as the data is not populated while it is being loaded, and you get error in that while. You can use v-if in your template till the data is populated in the view. So the element will not be rendered till the data is loading and once the data is loaded it will show the data.

It can be like following:

<div v-if="data.pick">
  {{data.pick.box}}
</div>

edited Jul 15, 2022 at 20:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 2, 2017 at 10:13

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

3 Comments

Ron Al Over a year ago

love easy solutions

Fathy Over a year ago

this is not working if u have multiple calls for this nested object

Parth Developer Over a year ago

saved me from a whole lot of trouble

Tax Raoul · Accepted Answer · 2020-04-19 09:06:04Z

1

My solution was to create an empty object with empty properties.

 data () {
       return {
           loading: false,
           data: {pick:{},}
       }   
    },

answered Apr 19, 2020 at 9:06

Tax Raoul

733 silver badges10 bronze badges

Collectives™ on Stack Overflow

Vue.js cannot access to nested properties of data object

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related