Vue.js nie może uzyskać dostępu do danych z zagnieżdżonych właściwości obiektu

Question

W Vue.js I pobrania części danych o JSON pliku tak:

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

Dane pobierane ma następującą strukturę:

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

Kiedy próbuję uzyskać dostęp do {{ data.pick.box }} or {{ data.pick.box.single }} w moim elementu, zawsze się ten komunikat o błędzie:

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) 

Czy czy jakiekolwiek ograniczenie dostępu do głęboko zagnieżdżonych obiektów? Kiedy na przykład wywoływam {{ data }}, wyświetlam całą strukturę danych w postaci ciągu znaków.

Jak wspomniano przez Nora, oto skrzypce: jsfiddle

Answer 1

Można spróbować czeka na dane, aby zakończyć ładowanie, aby wyświetlić je w szablonie:

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)), 
     } 
    } 
} 

W szablonie:

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

Answer 2

Otrzymujesz ten błąd, ponieważ data nie jest wypełniany podczas ładowania i pojawia się w nim błąd. Możesz użyć v-if w swoim szablonie, dopóki dane nie zostaną wypełnione w widoku. Tak więc element nie zostanie wyrenderowany do momentu załadowania danych, a po załadowaniu danych wyświetli dane.

To może być jak następuje:

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