Kaedah dan isu kitaran hayat dalam VueJS

Question

Saya bergelut dengan kod ini dan atas sebab tertentu retrieveTutorials() ia tidak menghantar maklumat kepada baseDeDatosVias. Saya cuba menukar fungsi kepada kitaran hayat lain tetapi ia tidak berfungsi. Mungkin penyelesaiannya sangat mudah tetapi saya tidak menemuinya. Terima kasih terlebih dahulu atas bantuan anda! !

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);

(Saya tahu saya juga perlu membetulkan semua "jika lain")

Kod lengkap adalah seperti berikut:

<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

Nampak seperti isu tak segerak - cuba:

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