在vue模板中从axios渲染值

Question

我正在尝试在我的nuxt应用程序的div标签内呈现值。

我收到一个错误“无法读取未定义的属性'free_funds'。我是Axios和Nuxt的新手。

原因可能是引导程序需要JQuery来更新标签中的数据吗？ 我不打算从我在网上看到的例子中使用Jquery如果你使用Axios来获取数据，那么Jquery不是必需的。

原始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>

Answer 1

您可以在mounted()生命挂钩中调用API来调用方法。 另外，请参阅结果是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>

在vue模板中从axios渲染值

问题描述

1 个解决方案

解决方案1
0 2019-03-19 19:15:05

在vue模板中从axios渲染值

问题描述

1 个解决方案

解决方案1 0 2019-03-19 19:15:05

解决方案1
0 2019-03-19 19:15:05