在 vue 模板中从 axios 渲染值答案

【问题标题】：Render value from axios in vue template在 vue 模板中从 axios 渲染值
【发布时间】：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 文档中的相同。

标签： javascript vue.js axios nuxt.js

【解决方案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（错字）