esta es la primera vez que publico aquí, estoy trabajando en una aplicación donde necesito obtener datos de una API y mostrarlos a través de un gráfico (estoy usando vue chart js). El código está casi terminado, puedo ver en la consola los datos de la API.

Mostrando los datos de la API en la consola

Esta es mi conexión chart/api:

 <template> <div> <bar-chart :data="barChartData" :options="barChartOptions" :height="150" :width="150" /> </div> </template> <script> import BarChart from "~/components/BarChart"; const chartColors = { grey: "rgba(210, 210, 210, 0.2)", white: "rgb(255,255,255)", }; export default { components: { BarChart, }, data() { return { barChartData: { asistencia: [], labels: [], datasets: [ { label: "Income", backgroundColor: [chartColors.white, chartColors.grey], data: [0,0], }, ], }, barChartOptions: { responsive: true, legend: { display: true, }, }, }; }, async fetch() { this.asistencia = await fetch( 'http://127.0.0.1:8000/apiasistenciausuarioAsistenciaUsuario/', ).then(res => res.json()) console.log(this.asistencia); }, components: { BarChart, }, methods: { refresh() { this.datos(); this.$nuxt.refresh(); }, datos() { this.barChartData.datasets[0].data = [ this.res.is_presente, ]; }, } };

Como pueden ver mando los datos a la consola pero no me aparece la grafica de "Asistencia" y es que no esta recibiendo los datos correctamente

 datos() { this.barChartData.datasets[0].data = [ this.res.is_presente, ];

barChartData debería obtener los datos de la var "is_presente" de la API, pero esa var es booleana, así que estaba pensando en hacer una validación para verificar cuándo es verdadero/falso y hacer un contador para completar el gráfico.

 datos() { this.barChartData.datasets[0].data = [ if(this.res.is_presente == true){ count++; }else{ count--; } ];

No se como hacer esto, tengo la idea pero no se como ejecutar esto.... Gracias de antemano!