Manipulating data using Vuex and vue google chart

Question

I want get the data from the store and make some operations then pass it to the vue-google-chart in the template, this is my 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"); // it 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");
      }
    },
},
},

it simply gives me all the time the message NO DATA in the console, I dont know why, is there a better way to solve this problem?

Answer 1

You need to check if your this.$store.dispatch("setFiData") is working properly and assigning the fiData into your store.

I guess this api call is an async functions, so I think the best approach in your case would be this way. Would be better if you posted your vuex store too.

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,
      },
    };
  },
  
 mounted() {
   this.$store.dispatch("setFiData") // it calls the API
   .then(()=> {
     //Just run getData() when your api request is finished
      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");
      }
    },
},
},