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
<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>
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
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 usingthis.
.Use arrow function instead:
Side note: You will update
this.chartGitlab
before the request returns. Either move that update insidethen()
or useawait
in front of the server request. Most likely, this will work as expected: