I'm facing an issue with my code. The function retrieveTutorials() is not transferring the information to baseDeDatosVias as expected. I've attempted to change the function to a different lifecycle, but it hasn't resolved the problem. The solution might be simple, but I haven't been able to pinpoint it yet. Thank you in advance for your assistance!
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 am aware that I also need to correct all the "else ifs")
Here is the full code snippet:
<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";
// Additional code removed for brevity
export default {
// Component details and methods
}
</script>
<style>
</style>