Перебор ключей вместо значений Vue app - PullRequest
Новая
       3

Перебор ключей вместо значений Vue app

0 голосов
/ 21 марта 2019

Я пытаюсь выбрать значения для трех ключей из моего API с помощью axios.Каждый раз, когда я делаю запрос, я показываю значения четыре раза для каждой клавиши.Я уронил ключ от своих моделей данных и прошел повторное тестирование.Когда я это сделал, мой запрос отображался три раза вместо четырех.То есть я перебираю ключи вместо значений.

Как я могу изменить этот код для отображения только значений каждой клавиши?Я использую nuxt django и axios.

Это возвращение данных json.{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}

Как получить значения только для каждого тега абзаца вместо значений для каждого тега абзаца 4 раза? 

  <template>
    <div class="container">
      <h2>Current Balance</h2>
      <ul class="trendings">
        <li v-for="result in results" :key="result">
          <p>{{ results.balance }} balance</p>
          <p>{{ results.free_funds }} free_funds</p>
          <p>{{ results.exposure }} exposure</p>
        </li>
      </ul>
    </div>
  </template>


  <script>
  import axios from "axios";
  export default {
    asyncData() {
      return axios.get("http://localhost:8000/api/balance/1").then(res => {
        return { results: res.data };
      });
    }
  };
  </script>

Ответы [ 2 ]

0 голосов
/ 21 марта 2019

Если ответ JSON выглядит именно так: 

{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}

Тогда вам даже не понадобится v-for, потому что есть только одна вещь для повторения.

Если выхотите v-for, заставить данные возвращаться в виде массива, обернув его так, чтобы это было так: 

[ {"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0} ]

Итак: 

return { results: [res.data] };
0 голосов
/ 21 марта 2019

См. документы 

 <li v-for="(result, key) in results" :key="result">
      <p>{{ result }} {{ key }}</p>
 </li>
...