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

Question

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>

Solution 1

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

Solution 2

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

Solution 3

You can type simply like this:

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

Comments

[redshift]

Thanks! Indeed, that was one of the issues...and I should have known that. However, I still get the following error in console: "Property or method "symbols" is not defined on the instance but referenced during render....snip.." . My code looks the same above but with the added data function mentioned. Any ideas?

[Saurabh]

@redshift the problome is you have symbols at child level, however you are using it at DOM on parent level.

[redshift]

Thanks, that was the issue.

[cdsaenz]

Saving tip, I was copying and pasting from the original router-less version and I forgot this detail even though it's mentioned clearly in the docs. Thanks.