I am looking to retrieve data from the store, perform some operations on it, and then pass it to the vue-google-chart component in the template. Here is my current implementation:
export default {
name: "Chart1",
components: {
GChart, // vue google chart component
},
data() {
return {
data: null,
totalGeneral: 0,
totalHomme: 0,
totalFemme: 0,
dataHomme: null,
dataFemme: null,
filieres: null,
chartData: [],
chartOptions: {
chart: {
title: "STUDENTS BY ROUTE INITIAL TRAINING",
},
is3D: true,
},
};
},
created() {
this.$store.dispatch("setFiData"); // calls the API
},
mounted() {
this.getData();
},
methods: {
getData() {
this.data = this.$store.getters.fiData;
this.chartData = [];
this.dataFemme = [];
this.dataHomme = [];
this.filieres = [];
if (this.data.length) {
for (let i = 0; i < this.data.length; i++) {
this.chartData.push([this.data[i].filiere, this.data[i].total]);
this.dataHomme.push(this.data[i].homme);
this.dataFemme.push(this.data[i].femme);
this.filieres.push(this.data[i].filiere);
this.totalHomme += this.data[i].homme;
this.totalFemme += this.data[i].femme;
}
this.totalGeneral = this.totalHomme + this.totalFemme;
} else {
console.log("NO DATA");
}
},
},
},
Every time I run this code, I consistently get the message "NO DATA" in the console. I'm unsure why this is happening. Is there a more effective way to resolve this issue?