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>
1 answers
solution1
0 2019-03-19 19: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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.