Currently, I am attempting to showcase the list of users obtained from my Django API on my VUEjs application.
Here is the data for the User list fetched from the API:
{
"count": 1,
"next": null,
"previous": null,
"results": [
{
"url": "http://localhost:8000/v1/users/1/",
"username": "admin",
"email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d7d2dbdfd8f6d3ced7dbc6dad398d5d9db">[email protected]</a>",
"groups": []
}
]
}
Here is my VUE code snippet:
<template>
<div>
<h1> Users </h1>
<div v-for="result in APIData.results" :key="result.username">
<h5>{{ result.username }}</h5>
<p>{{ result.email }}</p>
</div>
</div>
</template>
<script>
import { fetchAPI } from '../axios-api';
import { mapState } from 'vuex';
export default {
name: 'Users',
computed: mapState(['APIData']),
created() {
fetchAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
.then(response => {
this.$store.state.APIData = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
Despite a successful API request and visible data in the network tab, I am facing issues with displaying the data on the webpage. Could there be an issue with how I'm rendering the users or is something crucial missing in my approach?
Seeking guidance as a beginner in VUEjs. Any help is greatly appreciated!