Вывод значения из axios в шаблоне vue

#javascript #vue.js #axios #nuxt.js

Вопрос:

Я пытаюсь отобразить значение внутри тега div в моем приложении nuxt.

Я получаю сообщение об ошибке «Не удается прочитать свойство ‘free_funds’ из неопределенного. Я новичок в Axios и Nuxt.

Может ли причина в том, что bootstrap требует jQuery для обновления данных в тегах? Я не планирую использовать Jquery из примеров, которые я видел в Интернете, Jquery не является обязательным требованием, если вы используете Axios для извлечения данных.

Данные api в необработанном формате json выглядят следующим образом.

 {"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>

Ответ №1:

Вы можете вызвать API в mounted() life hook, вызывающем метод. Кроме того, see 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>