How to get data to work when used within a component and Axios?

30
votes

I'm new to Vue.js and Axios. I don't quite understand how to get the data option to work when used within a component.

Why doesnt' my test work?

I get the following error in the console:

[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)

My simple test:

My data (snipped for brevity):

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

My component:

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

Vue instance:

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

My HTML:

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

3 Answers

57
votes

As the error is saying:

The "data" option should be a function

In the component, the data must be a function, you need to modify the data block to be a function which will return the data structure to be used in DOM in a reactive way:

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);
    }
});
7
votes

data inside a Vue Component should be a function that returns an object, as described in the Vue.js common gotchas.

4
votes

You can type simply like this:

data() {
    return {
        ...... tra-ta-ta.......
    }
},