Chartjs-How to fetch the data from API first then re-mount the barchart component

by

0👍

If you only need to fetch data once and then have it displayed in the chart you can achieve it with v-if or with the Vue key attribute. The below code snipped should work for you.

<template>
    <div class="row">
      <div class="col-xl-12 col-md-6 col-sm-12">
         <bar-chart
          :key="sent_applications.length"
           v-if="dataFetched"
           :active-members="active"
           :name="governorateName"
           :total-sent-applications="sent_applications"
         />
     </div>
  </div>
</template>

<script>
import BarChart from "@/components/UI/BarChart.vue";

export default {
  components: {
    AppCard,
    BarChart,
  },
  data() {
    return {
      chartData: [],
      active: [],
      governorateName: [],
      sent_applications: [],
      dataFetched: false
    };
  },
  created() {
    this.chartData = this.$store
      .dispatch("home/fetchAllData") // function that loads data from api
      .then((response) => { // the returned data from api
        this.sent_applications = response.data.data.governerate.map(
          (el) => el.total_sent_applications
        );
        this.governorateName = response.data.data.governerate.map(
          (el) => el.name_ar
        );
        this.active = response.data.data.governerate.map(
          (el) => el.active_members
        );
        this.dataFetched = true
      })
  },
};
</script>

Leave a comment