Methods and life cycle issues in VueJS

Question

I'm struggling with this code and for some reason retrieveTutorials() is not passing the information to baseDeDatosVias. I tried changing the function to another lifecycle but it didn't work. Maybe the solution is really simple but I can't find it. Thanks in advance for your help! !

methods: {
  retrieveTutorials() {
    TutorialDataService.get(this.$auth.user.name)
      .then(response => {
        this.baseDeDatosVias = response.data;
        console.log(this.baseDeDatosVias);
      })
    .catch(e => {
      console.log(e);
    });
  },


  populateGrados() {
  this.retrieveTutorials();
  this.cantViasEncadadenasPorGrados= [];
  const keys = Object.keys(this.baseDeDatosVias);
  console.log(keys);

(I know all "else if"s must also be corrected)

The complete code is as follows:

<template>
  <div>
    <!--Stats cards-->
      <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-6" v-for="stats in statsCards">
          <stats-card :type="stats.type"
                    :icon="stats.icon"
                    :small-title="stats.title"
                    :title="stats.value">
            <div class="stats" slot="footer">
              <i :class="stats.footerIcon"></i>
              {{stats.footerText}}
            </div>
          </stats-card>
        </div>
      </div>  
    <div class="row">
      <div class="col-md-6">
      <card>
        <template slot="header">
          <h4 class="card-title">Vias encadenadas por grado</h4>
          <p class="category">Por cantidad</p>
        </template>
        
        <bar-chart :labels="cantidadDeEncadenadas.labels"
                   :height="250"
                   :datasets="cantidadDeEncadenadas.datasets">
        </bar-chart>
        </card>
      </div>
    <div class="col-md-6">
      <card>
        <template slot="header">
          <h4 class="card-title">Progresion en el tiempo</h4>
          <p class="category">Proximamente</p>
        </template>
        <line-chart :labels="stockChart.labels"
                    :height="250"
                    :color="stockChart.color"
                    :extra-options="stockChart.options"
                    :datasets="stockChart.datasets">
        </line-chart>
      </card>
    </div>
      </div>

    <div class="row">
      <div class="col-lg-3 col-sm-6">
        <circle-chart-card :percentage="70"
                           chart-id="email-statistics-chart"
                           title="% de Vias Encadenadas"
                           description="Sobre el total de Realizadas"
                           color="#4acccd">
          <template slot="footer">
            <div class="legend">
              <i class="fa fa-circle text-info"></i> Encadenes
            </div>
            <hr>
          
          </template>
        </circle-chart-card>
      </div>

      <div class="col-lg-3 col-sm-6">
        <circle-chart-card :percentage="34"
                           chart-id="new-visitors-chart"
                           title="% de Vias a Vista"
                           description="Sobre el total de Encadenadas"
                           color="#fcc468">
          <template slot="footer">
            <div class="legend">
              <i class="fa fa-circle text-warning"></i> A Vista
            </div>
            <hr> 
          </template>
        </circle-chart-card>
      </div>  
    </div>

  </div>
</template>
<script>
  import LineChart from 'src/components/UIComponents/Charts/LineChart'
  import CircleChartCard from 'src/components/UIComponents/Cards/CircleChartCard.vue'
  import ChartCard from 'src/components/UIComponents/Cards/ChartCard';
  import StatsCard from 'src/components/UIComponents/Cards/StatsCard';
  import {Badge} from 'src/components/UIComponents'
  import Loading from 'src/components/Dashboard/Layout/LoadingMainPanel.vue'
  import TaskList from './Widgets/TaskList'
  import BarChart from 'src/components/UIComponents/Charts/BarChart'
  import { Card } from 'src/components/UIComponents'
  import users from 'src/components/Dashboard/Views/Tables/users.js'
  import TutorialDataService from "src/services/TutorialDataService.js";


  const tooltipOptions = {
    tooltipFillColor: "rgba(0,0,0,0.5)",
    tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    tooltipFontSize: 14,
    tooltipFontStyle: "normal",
    tooltipFontColor: "#fff",
    tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
    tooltipTitleFontSize: 14,
    tooltipTitleFontStyle: "bold",
    tooltipTitleFontColor: "#fff",
    tooltipYPadding: 6,
    tooltipXPadding: 6,
    tooltipCaretSize: 8,
    tooltipCornerRadius: 6,
    tooltipXOffset: 10,
  };

  export default {
    components: {
      LineChart,
      Card,
      StatsCard,
      ChartCard,
      CircleChartCard,
      Badge,
      TaskList,
      BarChart,
      users
    },
    methods: {
      retrieveTutorials() {
        TutorialDataService.get(this.$auth.user.name)
          .then(response => {
            this.baseDeDatosVias = response.data;
            console.log(this.baseDeDatosVias);
          })
        .catch(e => {
          console.log(e);
        });
      },


      populateGrados() {
      this.retrieveTutorials();
      this.cantViasEncadadenasPorGrados= [];
      const keys = Object.keys(this.baseDeDatosVias);
      console.log(keys);
      keys.forEach((key, index) => {
        if ((`${this.baseDeDatosVias[key].encadenada}`) === "false"){
        } else if (`${this.baseDeDatosVias[key].grado}` === "5"){
          this.dataParaViasEncadenadas.quinto++;
        } else if(`${this.baseDeDatosVias[key].grado}`=== "5+"){
          this.dataParaViasEncadenadas.quintoMas++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "6a"){
          this.dataParaViasEncadenadas.sextoA++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "6a+"){
          this.dataParaViasEncadenadas.sextoAMas++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "6b"){
          this.dataParaViasEncadenadas.sextoB++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "6b+"){
          this.dataParaViasEncadenadas.sextoBMas++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "6c"){
          this.dataParaViasEncadenadas.sextoC++;          
        } else if(`${this.baseDeDatosVias[key].grado}` === "6c+"){
          this.dataParaViasEncadenadas.sextoCMas++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "7a"){
          this.dataParaViasEncadenadas.septimoA++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "7a+"){
          this.dataParaViasEncadenadas.septimoAMas++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "7b"){
          this.dataParaViasEncadenadas.septimoB++;
        } else if(`${this.baseDeDatosVias[key].grado}` === "7b+"){
          this.dataParaViasEncadenadas.septimoBMas++;          
        } else if(`${this.baseDeDatosVias[key].grado}` === "7c"){
          this.dataParaViasEncadenadas.septimoC++;
        } else if(`${this.baseDeDatosVias[key].grado}` == "7c+"){
          this.dataParaViasEncadenadas.septimoCMas++;          
            }
          });        
      let claves = Object.keys(this.dataParaViasEncadenadas);
      for (let i=0; i<claves.length; i++){
        let clave = claves[i];
        this.cantViasEncadadenasPorGrados.push(this.dataParaViasEncadenadas[clave]);
      }
      },
    },
    mounted(){
    this.populateGrados();
    this.cantidadDeEncadenadas= {
          labels: ["5", "5+", "6a" ,"6a+", "6b", "6b+", "6c", "6c+", "7a", "7a+", "7b", "7b+", "7c","7c+"],
          datasets: [
            {
              label: "Vias.",
              borderColor: '#fcc468',
              fill: true,
              backgroundColor: '#fcc468',
              hoverBorderColor: '#fcc468',
              borderWidth: 4,
              data: this.cantViasEncadadenasPorGrados,      
            },
          ]
      };
    },

    /**
     * Chart data used to render stats, charts. Should be replaced with server data
     */
    data () {
      return {
        tutorials: [],
      cantViasEncadadenasPorGrados: [],
      cantidadDeEncadenadas: null,
      baseDeDatosVias: [], // users funciona
      dataParaViasEncadenadas: {
          quinto: 0,
          quintoMas: 0,
          sextoA: 0,
          sextoAMas: 0,
          sextoB: 0,
          sextoBMas: 0,
          sextoC: 0,
          sextoCMas: 0,
          septimoA: 0,
          septimoAMas: 0,
          septimoB: 0,
          septimoBMas: 0,
          septimoC: 0,
          septimoCMas: 0,
        },
        stockChart: {
          labels: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio"],
          datasets: [{
            label: "Cantidad de vias",
            borderColor: "#f17e5d",
            pointBackgroundColor: "#f17e5d",
            pointRadius: 3,
            pointHoverRadius: 3,
            lineTension: 0,
            fill: false,
            borderWidth: 3,
            data: [20, 25, 30, 35, 28, 33, 40]
          }],
          color: '#f17e5d',
          options: {
            showLine: false,

            tooltips: tooltipOptions,
            scales: {
              yAxes: [{

                ticks: {
                  fontColor: "#9f9f9f",
                  beginAtZero: false,
                  maxTicksLimit: 5,
                },
                gridLines: {
                  drawBorder: false,
                  borderDash: [8, 5],
                  zeroLineColor: "transparent",
                  color: '#9f9f9f'
                }

              }],

              xAxes: [{
                barPercentage: 1.6,
                gridLines: {
                  drawBorder: false,
                  borderDash: [8, 5],
                  color: '#9f9f9f',
                  zeroLineColor: "transparent"
                },
                ticks: {
                  padding: 20,
                  fontColor: "#9f9f9f"
                }
              }]
            }
          }
        },

        statsCards: [
          {
            type: 'warning',
            icon: 'nc-icon nc-globe',
            title: 'Total de Vias Encadenadas',
            value: '80',
            footerText: 'Actualizado ahora',
            footerIcon: 'nc-icon nc-refresh-69'
          },
          {
            type: 'success',
            icon: 'nc-icon nc-globe-2',
            title: 'Total de Vias Realizadas',
            value: '95',
            footerText: 'Actualizado ahora',
            footerIcon: 'nc-icon nc-refresh-69'
          },
          {
            type: 'danger',
            icon: 'nc-icon nc-vector',
            title: 'Vias realizadas el ultimo mes',
            value: '23',
            footerText: 'hace 30 dias',
            footerIcon: 'nc-icon nc-calendar-60'
          },
          {
            type: 'info',
            icon: 'nc-icon nc-favourite-28',
            title: 'Total Vias a Vista',
            value: '45',
            footerText: 'Actualizado ahora',
            footerIcon: 'nc-icon nc-refresh-69'
          }
        ],
       
      
       
        

      }
    }
  }

</script>
<style>

</style>

Answer 1

Looks like an async issue - try:

async populateGrados() {
    await this.retrieveTutorials();
    // rest of the code
}