Calling a function from data() - vue.js

Question

I'm new to vue.js 2 . I'm currently recreating this graph inside with the vue framework :
https://codepen.io/apexcharts/pen/rqWeBX
I need to get some datas from a generateDayWiseTimeSeries() function .
I'm currently calling it from DATA() and it leads me to this error :
[Vue warn]: Error in data(): "ReferenceError: generateDayWiseTimeSeries is not defined"
I have tried out returning data with the .this syntax and placing the function inside of the created: part, with no luck.
This is my vue.js code, i would appreciate if you could tell me if that's the right way to do .
Vue.component("apexchart", VueApexCharts);
const Dashboard = {
data: function() {
return {
series_5: [
generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
min: 30,
max: 90
})
]
};
},
components: {
apexcharts: VueApexCharts
},
methods: {
generateDayWiseTimeSeries: function(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
},
,
template: `
// THE TEMPLATE IS USELESS FOR THIS PROBLEM
<div class="container">
<div class="row" >
<div class="col-sm col-xs-12">
<div class="card " style ="margin-bottom : 20px" >
<div class="card-body">
<h5 class="card-title">Indices de ventes</h5>
<p class="card-text">Ventes totales .</p>
<div><apexchart type="bar" :options="options_1" :series="series_1"></apexchart></div>
</div>
</div>
</div>
<div class="col-sm col-xs-12">
<div class="card " style ="margin-bottom : 20px" >
<div class="card-body">
<h5 class="card-title">Ventes</h5>
<p class="card-text">Indice des ventes total.</p>
<div><apexchart type="line" :options="options_2" :series="series_2"></apexchart></div>
</div>
</div>
</div>
</div> // THE TEMPLATE IS USELESS FOR THIS PROBLEM
`
};
EDIT : Modified
series_5: [
this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, {
min: 30,
max: 90
})
]
And now it seems to be working !

Answer 1

Your issue can be solved by adding this to your call to generateDayWiseTimeSeries().
series_5: [
this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, { min: 30, max: 90 })
]
It is not declared as a global function, so you need to provide the context when calling it.
That being said, it seems like what you are looking for is a computed property. Modify your JavaScript as follows:
const Dashboard = {
data: function() {
return {};
},
components: {
apexcharts: VueApexCharts
},
computed: {
series_5() {
return this.generateDayWiseTimeSeries(new Date("22 Apr 2017").getTime(), 115, { min: 30, max: 90 });
}
},
methods: {
generateDayWiseTimeSeries: function(baseval, count, yrange) {
var i = 0;
var series = [];
while (i < count) {
var x = baseval;
var y =
Math.floor(Math.random() * (yrange.max - yrange.min + 1)) +
yrange.min;
series.push([x, y]);
baseval += 86400000;
i++;
}
return series;
}
},
,
...
}
In general, logic doesn't belong in the data() function. By convention, data() just returns a JSON object that represents the Vue instance's data.