Question

我正在尝试使用axios从我的api中选择三个键的值。每次发出请求时，每个键都会显示四次值。我从数据模型中删除了一个密钥，然后重新进行了测试。当我这样做时，我的请求显示了3次而不是4次。意思是我要遍历键而不是值。

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

这是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>

Answer 1

请参见docs

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

Answer 2

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

遍历键而不是值Vue应用

2 个答案: