Möglichkeit, JSON-Objekte verschachtelter Schlüssel in Vue.js zu finden

Question

Ich versuche, Benutzer aus einer Benutzerliste der Django-API in meiner VUEjs-Anwendung anzuzeigen.

Benutzerlistendaten in meiner API:

{
  "Anzahl": 1,
  "nächster": null,
  "vorherig": null,
  "Ergebnisse": [
    {
      "URL": "http://localhost:8000/v1/users/1/",
      "Benutzername": "admin",
      "E-Mail": "admin@example.com",
      "Gruppen": []
    }
  ]
}

Mein VUE-Code:

<template>
    <div>
        <h1> Benutzer </h1>
        <div v-for="Ergebnisse 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} aus 'vuex';

Standard exportieren {
    Name: 'Benutzer',
    berechnet: mapState(['APIData']),
    erstellt() {
        getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
        .then(response => {
            this.$store.state.APIData = Antwort.Daten
        })
        .catch(error => {
            console.log(Fehler)
        })
    }
}
</script>

Aus irgendeinem Grund werden die Daten nicht auf der Webseite angezeigt, obwohl ich sehe, dass meine API-Anfrage erfolgreich war und die Daten auf der Registerkarte „Netzwerk“ sichtbar sind. Ist die Darstellung des Benutzers korrekt? Oder übersehe ich etwas?

Ich bin neu bei VUEjs. Kann mir jemand helfen?

Answer 1

问题出在v-for上，你可以尝试使用：v-for="results in APIData.results"，因为"results"不是一个访问器，而是你给数组中的每个值分配的名称，而APIData不是一个数组。

Answer 2

如果你只想循环遍历APIData中的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>