[Vuejs]-Render value from axios in vue template

by

0👍

You can call API in mounted() life hook invoking a method. Also, see results is an Array in your API response. Try this:

<template>
  <div>
...

<li v-for="res in results" :key="res.free_funds" class="fre-item">
  <a class="nav-link">Free Funds</a>
  <div class="fre-data">{{res.free_funds}}</div>
</li>
...


  </div>
</template>

<script>
export default {
  data() {
    return {
      results: []
    };
  },
  methods: {
    async getBalance() {
      try { 
        const response = await $axios.get('/api/balance/');
        this.results = response.data.results;
        this.error = false;
      } catch(e) {
        console.log('error', e);
      }
    }
  },
  created() {
    this.getBalance();
  }
}
</script>

Leave a comment