[FIXED] How can i call a Rest API from a Vue component?

Issue

I'm just getting started to VueJS and I'm trying to create a very simple page where a pie chart with some data is shown.

Right now, I managed to display the chart using example data, but now I would like to populate the chart with data retrieved from an API call on my backend http://127.0.0.1:8000/user/getamount.

Here's the code:

chart.js

import Vue from "vue/dist/vue.js";
import Vuex from "vuex";
import storePlugin from "./vuex/vuex_store_as_plugin";
import App from './App.vue'
import HighchartsVue from "highcharts-vue";
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(Vuex);
Vue.use(storePlugin);
Vue.config.productionTip = false;
Vue.use(HighchartsVue);
Vue.use(VueAxios, axios)


new Vue({
  el: "#app",
  render: h => h(App),
});

App.vue

<template>
  <div>
    <highcharts class="hc" :options="chartOptions" ref="chart"></highcharts>
  </div>
</template>

<script>

export default {
  data() {
    return {
      chartOptions: {
        series: [{

           type: 'pie',
           name: 'Browser share',
           data: [
              ['Firefox',   45.0],
              ['IE',       76.8],
              ['Safari',    8.5],
              ['Opera',     6.2],
              ['Others',   0.7]
           ]
        }],

      }
    };
  }
};
</script>

I just got to started to Vue so a lot of stuff is not clear yet, but where am I supposed to perform the API request here? I've seen a lot of examples where axios is used to call an API and show data on the page, but in this case I need data on my component, since the chart it's there. Should I just perform the call from the component? Or am I missing something?

Solution

Since you will still load data, define it but start the variable null:

series: [{
   type: 'pie',
   name: 'Browser share',
   data: null
}],

In created (marked as async for async/await pattern), load the data using axios:

import axios from 'axios';
export default {
  data() {
  ...
  },
  async created() {
    const response = await axios.get(...);  // Load the data from your api url
    this.chartOptions.series[0].data = response.data;  // set the data
    // `response.data` should contain:
    /*
      [
        ['Firefox',   45.0],
        ['IE',       76.8],
        ['Safari',    8.5],
        ['Opera',     6.2],
        ['Others',   0.7]
      ]
    */
  }
}

Here's a sandbox simulating this with a setTimeout

Answered By - Dan

Answer Checked By - Cary Denson (PHPFixing Admin)