구성 요소와 Axios에서 사용할 때 데이터를 가져 오는 방법은 무엇입니까?

Question

VueJS2와 Axios를 처음 사용하고 컴포넌트 내에서 데이터를 사용할 때 데이터를 가져 오는 방법을 이해하지 못했습니다.

왜 내 테스트 작업을하지 않았습니까?

나는 콘솔에서 다음과 같은 오류가 발생합니다 :

은 [뷰는 경고] : "데이터"옵션은 구성 요소 정의의 인스턴스 당 값을 반환하는 함수이어야한다.

[Vue 경고] : 속성 또는 메서드 "symbols"은 인스턴스에 정의되어 있지 않지만 렌더링 중에 참조됩니다. 데이터 옵션에서 반응적인 데이터 속성을 선언해야합니다.

내 간단한 테스트 (루트 인스턴스에서 발견) :

내 데이터 (간결 냈다) :

[{"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); 
    } 
}); 

인스턴스 인스턴스 :

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을 설명한다.