Currently, I am facing an issue where I am retrieving the values for three keys from my API using Axios. However, each time I make a request, the values are being displayed four times for each key. After removing one key from my data models and retesting, I discovered that the request is now displaying three times instead of four. It seems like I am inadvertently iterating over the keys instead of just getting the values.
I am working with Nuxt, Django, and Axios. How can I modify this code to only display the values of each key without repetition? This is the JSON data returned by Axios:
{"id":1,"balance":10.0,"exposure":7.0,"free_funds":80.0}Is there a way to extract only the values for each paragraph tag, rather than having them repeat four times?
<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>