Estoy tratando de mostrar los usuarios de la lista de usuarios que obtengo de mi API de Django en mi aplicación VUEjs.
Datos de mi lista de usuarios de la API:
{ "count": 1, "next": null, "previous": null, "results": [ { "url": "http://localhost:8000/v1/users/1/", "username": "admin", "email": "admin@example.com", "groups": [] } ] }Mi código VUE:
<template> <div> <h1> Users </h1> <div v-for="results in APIData" :result="results" :key="results.username"> <h5>{{ result.username }}</h5> <p>{{ result.email }}</p> </div> </div> </template> <script> import { getAPI } from '../axios-api'; import { mapState } from 'vuex'; export default { name: 'Users', computed: mapState(['APIData']), created() { getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } }) .then(response => { this.$store.state.APIData = response.data }) .catch(error => { console.log(error) }) } } </script>Por alguna razón, los datos no se muestran en la página web aunque puedo ver que mi solicitud de API es exitosa y puedo ver los datos en mi pestaña de red. ¿Es correcta la forma de mostrar los usuarios? ¿O me estoy perdiendo algo?
Soy nuevo en VUEjs, ¿alguien puede ayudarme?
Si desea recorrer solo los results en APIData :
new Vue({ el: '#demo', data() { return { APIData: { "count": 1, "next": null, "previous": null, "results": [ { "url": "http://localhost:8000/v1/users/1/", "username": "admin", "email": "admin@example.com", "groups": [] }, { "url": "http://localhost:8000/v1/users/1/", "username": "user", "email": "user@example.com", "groups": [] } ] } } }, }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <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> </div>El problema está en v-for, puede probar: v-for="results in APIData.results" ya que "resultados" no es un elemento de acceso, es el nombre que está asignando a cada valor dentro de la matriz, y APIData es no una matriz.