Ich habe Probleme mit diesem Code und aus irgendeinem Grund werden die Informationen von RetrieverTutorials() nicht an baseDeDatosVias weitergeleitet. Ich habe versucht, die Funktion auf einen anderen Lebenszyklus umzustellen, aber es hat nicht funktioniert. Vielleicht ist die Lösung wirklich einfach, aber ich kann sie nicht finden. Vielen Dank im Voraus für Ihre Hilfe! !
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);
(Ich weiß, dass auch alle „sonst wenn“-Fragen korrigiert werden müssen)
Der vollständige Code lautet wie folgt:
<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> 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
看起来像是异步问题 - 尝试：
async populateGrados() { await this.retrieveTutorials(); // rest of the code }