Vue.jsは、私はこのようなJSONファイルのいくつかのデータをフェッチデータオブジェクトのネストされたプロパティにVue.jsで

Question

にアクセスすることはできません。

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

フェッチされたデータは、以下の構造を有する：

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

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) 

は：私は私のコンポーネントで{{ data.pick.box }} or {{ data.pick.box.single }}にアクセスしようとすると

は、私はいつも、このエラーメッセージが表示されます深いネストされたオブジェクトにアクセスするための制限はありますか？たとえば、{{ data }}を呼び出すと、データ構造全体が文字列として正しく表示されます。

ノラで述べたように

は、ここにフィドルです：jsfiddle

Answer 1

データはテンプレートでそれを表示するには、読み込みが完了するためにあなたが待って試すことができます：テンプレートで

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

：

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

Answer 2

dataが読み込まれている間に読み込まれていないため、このエラーが発生します。ビューにデータが入力されるまで、v-ifをテンプレートに使用できます。したがって、データがロードされるまでエレメントはレンダリングされず、データがロードされるとデータが表示されます。

これは、次のようにすることができます：

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