[Vuejs]-Vue wait for API call before loading data

by

0👍

Thanks to @Lissy93 I figured out that I could use finally after my api call where I would update chartOptions for anyone wondering this is what worked for me

<template>
  <div>
<highchart :options="chartOptions" />
<div>{{testresults}}</div>
  </div>
</template>

<script>
import axios from "axios"

  export default {
    data(){
      return{
        testresults:[],
        loadAPI:false,
        chartOptions:{}

    }
  },
          async mounted() {
      try {
      const res = await axios.get(`http://localhost:3002/backend/getresults`);
      
      
      this.testresults=res.data.data[0];
      console.log(testresults)
      }catch (error){
        console.log(error);
      }finally{
                this.chartOptions={
            chart: {
                   plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
            },
              tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
            title: {
                text: 'Visual Test results'
            },
            xAxis: {
                categories: ['passed','failed','skipped']
            },
         
            
               series: [{
    name: 'Results',
    colorByPoint: true,
    data: [{      name: 'passed',
      y: this.testresults.pass,
      sliced: true,
      selected: true}]
        }]
      }
      }
    },
    computed:{
      
    }
  }
</script>

<style lang="scss" scoped>

</style>

Leave a comment