How to update a 'this' variable in Vue.js and set API results

Question

I want to update my variable nbeBugs but it is not accessible inside the then function. My function getApi is an async function because the API takes time to respond

Template.vue

<script>
import ChartDataLabels from 'chartjs-plugin-datalabels'
import getApi from '../../api/api'
const plugins = [ChartDataLabels]
    export default {
        data() {
        return {
            
            plugins: [ChartDataLabels],
            nbeBugs: [10,10,10,10,10],
            chartGitlab: null,
            lightOptions3: {
                plugins: {
                    legend: {
                        labels: {
                            color: '#ddd'
                        },
                        display: true,
                        position: 'bottom',
                        align: 'center'
                    },
                    datalabels: {
                        color: '#EEE',
                        labels: {
                            value: {
                            font: {
                                weight: 'bold',
                                size: 24,
                                }
                            }
                        }
                    }
                }
            }
        }
    },
    mounted () {
         this.getData()       
    },
    methods: {
        getData() {
            let url_application = 'api/bugs_gitlab'
            
            getApi(url_application, null).then(function(results){
                console.log(results.data)
                this.nbeBugs = results.data
                })
            this.chartGitlab = {
                labels: ['Bloquant','Critique','Majeur','Moyen','Faible'],
                datasets: [
                    {
                        borderColor: "#071426",
                        data: this.nbeBugs,
                        backgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
                        hoverBackgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"]
                    }
                ]
            }
        }
    }
}
</script>

<template>
<div class="col-12 xl:col-6">
    <div class="card p-3 h-full">
        <h5>Nombre de bugs Gitlab</h5>
        <div class="flex h-full justify-content-center align-content-center flex-wrap card-container yellow-container">
            <Chart type="doughnut" :data="chartGitlab" :options="lightOptions3" :plugins="plugins"/>
        </div>
    </div>
</div>
</template>

<style scoped>
</style>

api.js

import axios from "axios";
let path = import.meta.env.VITE_API_URL;
const axiosObjet = axios.create({
    baseURL: path,
    timeout: 8000,
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + localStorage.apiToken
        }
  });

async function getApi(api_path, data) {
    //console.log(headers)
    console.log(path)
    //console.log(axiosObjet)
    try {
        let res = await axiosObjet.get(api_path)
        if(res.status == 200){
            // test for status you want, etc
            console.log(res.status)
        }
        
        // Don't forget to return something   
        return res
    }
    catch (err) {
        console.error("getApi error : " + err);
    }
}

export default getApi

Answer 1

If the argument passed to the .then() function is a regular function, it has its own scope, and inside it, variables of the outer scope will not be accessible using this..

Use arrow function instead:

getApi(url_application, null).then(({ data }) => {
  console.log(data);
  this.nbeBugs = data;
});

Side note: You will update this.chartGitlab before the request returns. Either move that update inside then() or use await in front of the server request. Most likely, this will work as expected:

methods: {
  async getData() {
    let url_application = "api/bugs_gitlab";

    await getApi(url_application, null).then(({ data }) => {
      console.log(data);
      this.nbeBugs = data;
    });
    this.chartGitlab = {
      labels: ["Bloquant", "Critique", "Majeur", "Moyen", "Faible"],
      datasets: [
        {
          borderColor: "#071426",
          data: this.nbeBugs,
          backgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
          hoverBackgroundColor: ["#FF6384","#36A2EB","#FFA726","#66BB6A","#a855f7"],
        },
      ],
    };
  },
}