Vue methods order of execution

Question

I have a Vue app, and there is a method that calls data from an API and based on that data a filter data should be filled, so it can be rendered in some dropdown menus and based on that data other API calls should be performed. I use Vuex.

And I can't figure it out how to make that method called before the others on the Created Hook.

So, the method I need to be called at first, so the data to call the other methods is ready is 'actGetTabFilter'

This is the code where the filter is:

and this is the code of the script:

export default {
  name: "Engagement",
  mixins: [cvMixin, psi],
  components: {
    SecondaryNavbar,
    MenuNavigation,
    BarChart,
    ButtonsMenu,
    IndicatorsButtons,
    LeaderRanking,
    DoughnutChart,
    FilterSwitch,
  },
  data() {
    return {
      isLoading: false,
      is_data_fetched: false,
      area: null,
      area_filter: 7,
      area_personalities: 1,
      year: 2021,
      month: 3,
      filter: 1,
      classification: 1,
      actualIndicator: "",
      id: 1,
      actualIndicatorDesc: "",
      category: [1],
      categoryInfo: [],
      ranking: [],
      barData: {
        labels: [],
        data: [],
      },
      donutData: {
        name: null,
        labels: [],
        data: [],
        colors: [],
      },
      brandData: [],
      barThick: 15,
      site: "",
      show: 1,
      brand: {
        id: 0,
        name: null,
        description: null,
        image: null,
      },
    };
  },

  created() {
    this.isLoading = true;
    this.area = this.user.core_vp_id;

    this.actGetTabFilter()
      .then(() => {
        this.isLoading = true;
        this.tabFilter;
      })
      .catch((err) => {
        console.error("Error: ", err);
      })
      .finally(() => {
        this.month = this.tabFilter.months.slice(-1)[0];
        this.year = this.tabFilter.years[0];
        this.isLoading = false;
      });

    this.actGetLeaders()
      .then(() => {
        this.isLoading = true;
        this.leadersList;
      })
      .catch((err) => {
        console.error("Error: ", err);
      })
      .finally(() => {
        this.isLoading = false;
      });

    this.actGetPersonalitiesAreas()
      .then(() => {
        this.personalitiesAreaList;
      })
      .catch((err) => {
        console.error("Error: ", err);
      })
      .finally(() => {
        this.isLoading = false;
      });

    this.getCategoriesInfo();

    //Get Ranking, Chart and Improve Ranking Data
    this.getGeneralFilterData(
      this.filter,
      this.category,
      this.year,
      this.month
    );

    this.getPersonalitiesData(this.area_personalities);

    this.actGetLeadersInfo({ leader: [[30000423, 25]], year: 2021, month: 3 })
      .then(() => {
        this.leadersInfo;
      })
      .catch((err) => {
        console.error("Error: ", err);
      })
      .finally(() => {
        this.isLoading = false;
      });
  },
  computed: {
    ...mapState("modCore", ["user"]),
    ...mapState("modIndicators", [
      "tabFilter",
      "leadersList",
      "personalitiesAreaList",
      "categoriesListData",
      "generalFilterData",
      "personalitiesData",
      "leadersInfo",
    ]),
    title() {
      if (this.show == 2) {
        return "Personalidades de tu equipo";
      }
      return "Ranking Líderes - " + this.actualIndicator.toLowerCase();
    },
    datacollection() {
      return this.fillData();
    },
  },
  methods: {
    ...mapActions("modIndicators", [
      "actGetTabFilter",
      "actGetLeaders",
      "actGetPersonalitiesAreas",
      "actGetCategoriesInfo",
      "actGetGeneralFilterData",
      "actGetPersonalitiesData",
      "actGetLeadersInfo",
    ]),
    fillData() {
      return this.donutData;
    },
    changeClassification(classification, id, name, description, show) {
      this.classification = classification;
      this.category = [id];
      this.id = id;
      this.actualIndicator = name;
      this.actualIndicatorDesc = description;
      if (show !== 2) {
        this.getGeneralFilterData(
          this.filter,
          this.category,
          this.year,
          this.month
        );
      }
      // this.updateRanking(id);
      this.updateImproveRanking(id);
    },
    changeShow(number) {
      this.show = number;
    },
    changeFilter() {
      if (this.filter === 1) {
        this.filter = 2;
        this.barThick = 20;
      } else {
        this.filter = 1;
        this.barThick = 15;
      }
      this.filterAgain();
    },
    filterAgain() {
      this.getCategoriesInfo();
      this.getGeneralFilterData(
        this.filter,
        this.category,
        this.year,
        this.month
      );
    },
    filterPersonalities() {
      this.getPersonalitiesData(this.area_personalities);
    },
    updateRanking(category_id) {
      this.ranking = Object.values(
        this.generalFilterData.filter((category) => {
          return category.id == category_id;
        })[0].ranking
      );
      this.ranking.sort(
        (a, b) => parseFloat(b.average) - parseFloat(a.average)
      );
    },
    updateImproveRanking(category_id) {
      this.categoryInfo = this.categoriesListData.filter((category) => {
        return category.id == category_id;
      });
    },
    getGeneralFilterData(filter, category, year, month) {
      // This filter brings the information for the bar chart
      this.actGetGeneralFilterData({
        filter: filter,
        category: category,
        year: year,
        month: month,
      })
        .then(() => {
          this.is_data_fetched = false;
          this.actualIndicator = this.generalFilterData[0].name;
          this.actualIndicatorDesc = this.generalFilterData[0].description;
          this.ranking = Object.values(
            this.generalFilterData.filter((category) => {
              return category.id == this.id;
            })[0].ranking
          ).sort((a, b) => parseFloat(b.average) - parseFloat(a.average));

          let fetchedData = Object.values(
            this.generalFilterData.filter((category) => {
              return category.id == this.id;
            })[0].calculate
          );
          this.getChartData(fetchedData, this.filter);
        })
        .catch((err) => {
          console.error("Error: ", err);
        })
        .finally(() => {
          this.is_data_fetched = true;
          this.isLoading = false;
        });
    },
    getCategoriesInfo() {
      this.actGetCategoriesInfo({
        area: this.area_filter,
        year: this.year,
        month: this.month,
      })
        .then(() => {
          this.isLoading = true;
          this.categoryInfo = this.categoriesListData.filter((category) => {
            return category.id == this.id;
          });
        })
        .catch((err) => {
          console.error("Error: ", err);
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    getChartData(data, filter) {
      this.barData.labels.length = 0;
      this.barData.data.length = 0;
      if (filter == 2) {
        for (let i = 0; i < data.length; i++) {
          this.barData.labels.push(data[i].month);
          this.barData.data.push(Math.round(parseFloat(data[i].average)));
        }
      } else {
        data.sort((a, b) => parseFloat(b.average) - parseFloat(a.average));
        for (let i = 0; i < data.length; i++) {
          let siteName = data[i].name.split(" ");
          for (let i = 0; i < siteName.length; i++) {
            siteName[i] =
              siteName[i].charAt(0) + siteName[i].slice(1).toLowerCase();
          }
          this.barData.labels.push(siteName.join(" "));
          this.barData.data.push(Math.round(parseFloat(data[i].average)));
        }
      }
    },
    getPersonalitiesData(id) {
      this.actGetPersonalitiesData({
        id: id,
      })
        .then(() => {
          this.personalitiesData;
          this.is_data_fetched = false;
          this.isLoading = true;
          this.getBrandData();
          this.brand.id = this.personalitiesData.calculate[0].profile.id;
          this.brand.name = this.personalitiesData.calculate[0].profile.name;
          this.brand.description =
            this.personalitiesData.calculate[0].profile.description;
          this.brand.image = this.personalitiesData.calculate[0].profile.image;
        })
        .catch((err) => {
          console.error("Error: ", err);
        })
        .finally(() => {
          this.is_data_fetched = true;
          this.isLoading = false;
        });
    },
    getDonutData() {
      this.donutData.name = null;
      this.donutData.labels.length = 0;
      this.donutData.data.length = 0;
      this.donutData.colors.length = 0;
      this.donutData.name = this.personalitiesData.vp.name;
      this.brandData.sort(
        (a, b) => parseFloat(b.average) - parseFloat(a.average)
      );
      for (let i = 0; i < this.brandData.length; i++) {
        this.donutData.labels.push(this.brandData[i].profile.name);
        this.donutData.data.push(
          Math.round(parseFloat(this.brandData[i].average))
        );
        this.donutData.colors.push(this.brandData[i].color);
      }
    },
    changeBrand(id) {
      this.brand.id = id;
      this.filterBrand();
    },
    filterBrand() {
      let filteredBrand = this.personalitiesData.calculate.filter(
        (e) => e.profile.id == this.brand.id
      );
      this.brand.name = filteredBrand[0].profile.name;
      this.brand.description = filteredBrand[0].profile.description;
      this.brand.image = filteredBrand[0].profile.image;
      return filteredBrand;
    },
    getBrandData() {
      this.brandData = [];
      for (let i = 0; i < this.personalitiesData.calculate.length; i++) {
        this.personalitiesData.calculate[i].color = this.brandColors[i];
        this.brandData.push(this.personalitiesData.calculate[i]);
      }
      this.getDonutData();
    },
  },
};

tazertazer · Accepted Answer

2 solutions :

put your other functions in the "then" of "actGetTabFilter"
use await and store the returned value

in both cases this will wait the response before executing the others functions

Vue methods order of execution

Answers (2)

Related Questions