迭代键而不是值 Vue 应用程序

Question

我正在尝试使用 axios 从我的 api 中选择三个键的值。 每次我提出请求时，我都会为每个键显示四次值。我从我的数据模型中删除了一个密钥并重新测试。当我这样做时，我的请求显示了 3 次而不是 4 次。这意味着我正在迭代键而不是值。

如何更改此代码以仅显示每个键的值？我正在使用 nuxt django 和 axios。

这是 axios 返回的 json 数据。 {"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}

如何只获取每个段落标签的值 only 而不是每个段落标签的值 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>

Answer 1

如果 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] };

Answer 2

见docs

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