Façon de trouver des objets JSON de clés imbriquées dans Vue.js

Question

J'essaie d'afficher les utilisateurs d'une liste d'utilisateurs de l'API Django sur mon application VUEjs.

Données de la liste d'utilisateurs dans mon API :

{
  "compte": 1,
  "suivant" : nul,
  "précédent" : nul,
  "résultats" : [
    {
      "url": "http://localhost:8000/v1/users/1/",
      "nom d'utilisateur": "admin",
      "e-mail" : "admin@example.com",
      "groupes": []
    }
  ]
}</pré>
<p>Mon code VUE :</p>
<pre class="brush:php;toolbar:false;"><template>
    <div>
        <h1> Utilisateurs </h1>
        <div v-for="résultats dans APIData" :result="results" :key="results.username">
            <h5>{{ result.username }}</h5>
            <p>{{ result.email }}</p>
        </div>
    </div>
</modèle>

<script>
importer { getAPI } depuis '../axios-api' ;
importer { mapState } depuis 'vuex' ;

exporter par défaut {
    nom : 'Utilisateurs',
    calculé : mapState(['APIData']),
    créé() {
        getAPI.get('/v1/users/', { en-têtes : { Autorisation : 'Bearer ' + this.$store.state.accessToken } })
        .then(réponse => {
            this.$store.state.APIData = réponse.data
        })
        .catch(erreur => {
            console.log (erreur)
        })
    }
}
</script>

Pour une raison quelconque, même si je constate que ma requête API aboutit et que les données sont visibles dans l'onglet Réseau, les données ne s'affichent pas sur la page Web. La façon dont l'utilisateur est affiché est-elle correcte ? Ou est-ce que j'ai raté quelque chose ?

Je suis nouveau sur VUEjs, quelqu'un peut-il m'aider ?

Answer 1

Le problème vient de v-for, vous pouvez essayer d'utiliser : v-for="results in APIData.results", car "results" n'est pas un accesseur mais un nom que vous attribuez à chaque valeur du tableau, et APIData n'est pas un tableau.

Answer 2

Si vous voulez juste faire une boucleAPIData中的results :

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>