VueJS中的方法和生命周期问题

Question

我正在努力与这段代码，由于某种原因retrieveTutorials()它没有传递信息到baseDeDatosVias。我试图将功能更改为另一个生命周期，但不起作用。也许解决方法很简单，但我找不到。提前感谢您的帮助!!

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

(我知道也要纠正所有的&;else if &;)

下面是完整的代码:

<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

看起来像是异步问题-试试:

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