CODEWITHSUNDEEP
vue.jsvuejs2axiosvue-component
redshift
redshift

Reputation: 5227

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

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>

Upvotes: 33

Views: 29696

Answers (3)

Saurabh
Saurabh

Reputation: 73649

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

Upvotes: 58

Roman Yusupov
Roman Yusupov

Reputation: 41

You can type simply like this:

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

Upvotes: 4

jingman
jingman

Reputation: 405

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

Upvotes: 7

Related Questions