在 vue 模板中从 axios 渲染值
Posted
技术标签:
【中文标题】在 vue 模板中从 axios 渲染值【英文标题】：Render value from axios in vue template 【发布时间】：2019-08-10 09:00:37 【问题描述】：我正在尝试在我的 nuxt 应用程序的 div 标签内呈现一个值。
我收到一条错误消息“无法读取未定义的属性‘free_funds’。我是 Axios 和 Nuxt 的新手。
可能是因为引导程序需要 JQuery 来更新标签中的数据吗？我不打算使用我在网上看到的示例中的 Jquery 如果您使用 Axios 获取数据，则不需要 Jquery。
raw json中的api数据如下。
"count":1,"next":null,"previous":null,"results":
["balance":10.0,"exposure":7.0,"free_funds":5.0]
如何在 div 标签中传递免费资金的价值？我希望 div 标签显示 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>
【问题讨论】：
export default ... async 看起来不像构建 vue 组件的方式
@Flame 你确定吗？我正在使用 nuxt，它看起来与 nuxt 文档中的相同。
【参考方案1】：
您可以在mounted() life hook 中调用 API 来调用方法。此外，请参阅 results 是 API 响应中的一个数组。试试这个：
<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>【讨论】：
我已经尝试过您的解决方案，但我遇到了奇怪的行为。catch(err) 应该是 catch(e) 吗？整个块现在没有渲染。
将err 更改为e（错字）以上是关于在 vue 模板中从 axios 渲染值的主要内容，如果未能解决你的问题，请参考以下文章