Как получить данные для работы в компонентах и ​​Axios?

Question

Я новичок в VueJS2 и Axios и не совсем понимаю, как заставить данные работать, когда они используются в компоненте.

Почему «моя тестовая работа?

Я получаю следующее сообщение об ошибке в консоли:

[Вьет предупредит]: Опция «данные» должна быть функцией, которая возвращает значение в-например в определениях компонентов.

[Vue warn]: Символы свойств или методов не определены в экземпляре, но указаны во время рендеринга. Обязательно объявляйте свойства реактивных данных в опции данных. (Находится в корневой инстанции)

Мой простой тест:

Мои данные (пропущено для краткости):

[{"id":1, "name": "Airfield"}, {"id":2, "name": "Ship Yard"}] 

Мой компонент:

Vue.component('symbols-table', { 
    template: '<h1>Hello World</h1>', 
    data: { 
     symbols: [] 
    }, 
    created: function(){ 
     axios.get('symbols.json').then(response => this.symbols = response.data); 
    } 
}); 

Экземпляр Vue:

var app = new Vue({ el: '#app' }); 

Мой HTML:

<symbols-table> 
    <ul><li v-for="symbol in symbols">{{symbol.name}}</li></ul> 
</symbols-table> 

Answer 1

Как говорит ошибка:

Опция «данных» должен быть функцией

в компоненте data must be a function, вы должны изменить блок данных функция, которая будет возвращать структура данных, которая должна использоваться в реактивном способе DOMin:

Vue.component('symbols-table', { 
    template: '<h1>Hello World</h1>', 
    data: function() { 
     return { 
      symbols: [] 
     } 
    }, 
    created: function(){ 
     axios.get('symbols.json').then(response => this.symbols = response.data); 
    } 
}); 

Answer 2

data внутри компонента должна возвращать функцию, которая возвращает объект, как описано here.