How to get data to work when used within a component and Axios?
data
inside a Vue Component should be a function that returns an object, as described in the Vue.js common gotchas.
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);
}
});
You can type simply like this:
data() {
return {
...... tra-ta-ta.......
}
},