我正在努力处理这段代码,由于某种原因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>
P粉4638244102024-03-30 11:33:28
看起来像是异步问题 - 尝试:
async populateGrados() { await this.retrieveTutorials(); // rest of the code }