반응형
컴포넌트 및 Axios 내에서 데이터를 사용하는 경우 어떻게 데이터를 작동시키려면 어떻게 해야 합니까?
처음입니다Vue.js
그리고.Axios
어떻게 구해야 하는지 잘 모르겠어요data
컴포넌트 내에서 사용할 때 사용할 수 있는 옵션입니다.
왜 시험이 안 되는 거죠?
콘솔에 다음 오류가 나타납니다.
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions. [Vue warn]: Property or method "symbols" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)
간단한 테스트:
내 데이터(간단함을 위해 잘라낸):
[{"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>
이 에러는 다음과 같이 표시됩니다.
"data" 옵션은 함수여야 합니다.
컴포넌트에서 데이터는 함수여야 합니다.데이터 블록을 DOM에서 사용되는 데이터 구조를 반응적으로 반환하는 함수로 수정해야 합니다.
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);
}
});
data
Vue.js 공통 gotchas에서 설명한 바와 같이 Vue 컴포넌트 내의 함수는 객체를 반환하는 함수여야 합니다.
다음과 같이 간단하게 입력할 수 있습니다.
data() {
return {
...... tra-ta-ta.......
}
},
언급URL : https://stackoverflow.com/questions/42396867/how-to-get-data-to-work-when-used-within-a-component-and-axios
반응형
'programing' 카테고리의 다른 글
C/C++의 정규 분포에 따라 난수 생성 (0) | 2022.08.24 |
---|---|
C/C++ 소스 코드를 코딩 표준과 대조하여 검사하는 무료 툴? (0) | 2022.08.24 |
null과 빈("") Java 문자열의 차이 (0) | 2022.08.21 |
Java에서 변수 인수를 사용하는 메서드에 배열을 인수로 전달할 수 있습니까? (0) | 2022.08.21 |
C의 printf 함수 코드 (0) | 2022.08.21 |