Вью.js не может получить доступ к вложенным свойствам объекта данных

In Vue.js я получаю некоторые данные json-файла, как это:

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

когда я пытаюсь получить доступ к {{ data.pick.box }} or {{ data.pick.box.single }} в моем компоненте я всегда получаю это сообщение об ошибке:

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.$mount (eval at <anonymous> (app.js:139), <anonymous>:5978:15)
at VueComponent.Vue.$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 }}, например, я правильно получаю всю структуру данных, отображаемую в виде строки.

как упоминалось Норой, вот скрипка: jsfiddle

8
javascript json vue-component vue.js

2 ответов

вы можете попробовать дождаться завершения загрузки данных, чтобы отобразить их в шаблоне:

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>
4

Вы получаете эту ошибку, так как data не заполняется во время загрузки, и вы получаете ошибку в это время. Вы можете использовать v-if в вашем шаблоне, пока данные не будут заполнены в представлении. Таким образом, элемент не будет отображаться до загрузки данных, и после загрузки данных он покажет данные.

это может быть похоже на следующее:

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