programing

컴포넌트 및 Axios 내에서 데이터를 사용하는 경우 어떻게 데이터를 작동시키려면 어떻게 해야 합니까?

bestcode 2022. 8. 24. 23:55
반응형

컴포넌트 및 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);
    }
});

dataVue.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

반응형