Vue.js không thể truy cập vào các thuộc tính lồng nhau của dữ liệu đối tượng

Question

Trong Vue.js Tôi lấy một số dữ liệu của một json-file như thế này:

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

Dữ liệu lấy có cấu trúc sau:

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

Khi tôi cố gắng truy cập vào {{ data.pick.box }} or {{ data.pick.box.single }} trong thành phần của tôi, tôi luôn nhận được thông báo lỗi này:

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) 

là lại bất kỳ hạn chế nào để truy cập vào các đối tượng lồng nhau sâu? Ví dụ: khi tôi gọi {{ data }}, tôi nhận được toàn bộ cấu trúc dữ liệu được hiển thị dưới dạng chuỗi chính xác.

Như đã đề cập bởi Nora, đây là fiddle: jsfiddle

Answer 1

Bạn có thể thử chờ đợi dữ liệu để kết thúc tải để hiển thị nó trong mẫu của bạn:

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

Trong mẫu:

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

Answer 2

Bạn nhận được lỗi này vì data không được điền khi đang được tải và bạn gặp lỗi trong thời gian đó. Bạn có thể sử dụng v-if trong mẫu của mình cho đến khi dữ liệu được điền trong chế độ xem. Vì vậy, các yếu tố sẽ không được trả lại cho đến khi dữ liệu được tải và một khi dữ liệu được tải nó sẽ hiển thị dữ liệu.

Nó có thể là như sau:

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