Render value from axios in vue template

Question

I'm trying to render a value inside a div tag in my nuxt app.

I am getting an error "Cannot read property 'free_funds' of undefined. I'm new to Axios and Nuxt.

Could the reason be that bootstrap requires JQuery for updating data in tags? I do not plan to use Jquery from the examples I've seen online Jquery isn't a requirement if you use Axios for fetching data.

The api data in raw json is as follows.

{"count":1,"next":null,"previous":null,"results": 
[{"balance":10.0,"exposure":7.0,"free_funds":5.0}]}

How do I pass the value of free funds inside a div tag? I would like the div tag to display the value of 5.0

<template>
  <div>

    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    <body>

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">

      <ul class="navbar-nav active">

        <li class="nav-item">
          <a class="nav-link" href="/monitor">Monitor</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/configuration">Configuration</a>
        </li>


    <li class="fre-item">
      <a class="nav-link">Free Funds</a>

   <div class="fre-data" v-if="bal" >{{balance.free_funds}}</div>
   <div v-else>not found</div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/logout">Logout</a>
    </li>

      </ul>
    </nav>

    </body>
    </html>
    <nuxt/>

  </div>
</template>

<script>


export default {
  async asyncData () {
    try {
      const response = await $axios.get('/api/balance/')
      return {
        bal: response.data.results,
        error: true
      }
    } catch (e) {
      console.log('error', e)
      data()
      return {
        balance:{
        balance: "",
        free_funds: "",
        exposure:"",
        error: true
      }
    }
  }
}
}
</script>

that export default ... async doesnt look like how you would construct a vue component — Flame
@Flame are you sure? I'm using nuxt and it looks to be same as per nuxt documentation. — tomoc4

Sajib Khan Sajib Khan · Accepted Answer · 2019-03-19T19:15:05

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>

Render value from axios in vue template

1 Answers