Cara untuk mencari objek JSON bagi kunci bersarang dalam Vue.js

Question

Saya cuba memaparkan pengguna daripada senarai pengguna daripada Django API pada aplikasi VUEjs saya.

Data senarai pengguna dalam API saya:

{
  "kira": 1,
  "seterusnya": null,
  "sebelumnya": null,
  "hasil": [
    {
      "url": "http://localhost:8000/v1/users/1/",
      "nama pengguna": "admin",
      "e-mel": "admin@example.com",
      "kumpulan": []
    }
  ]
}

Kod VUE saya:

<template>
    <div>
        <h1>
        <div v-for="hasil dalam APIData" :result="results" :key="results.username">
            <h5>{{ result.username }}</h5>
            <p>{{ result.email }}</p>
        </div>
    </div>
</template>

<skrip>
import { getAPI } daripada '../axios-api';
import { mapState } daripada 'vuex';

eksport lalai {
    nama: 'Pengguna',
    dikira: mapState(['APIData']),
    dicipta() {
        getAPI.get('/v1/users/', { headers: { Authorization: 'Bearer ' + this.$store.state.accessToken } })
        .then(respon => {
            ini.$store.state.APIData = respons.data
        })
        .catch(error => {
            console.log(error)
        })
    }
}
</script>

Atas sebab tertentu, walaupun saya dapat melihat bahawa permintaan API saya berjaya dan data kelihatan dalam tab rangkaian, data itu tidak dipaparkan pada halaman web. Adakah cara pengguna dipaparkan betul? Atau adakah saya kehilangan sesuatu?

Saya baru menggunakan VUEjs, boleh sesiapa bantu?

Answer 1

Masalahnya ialah dengan v-for, anda boleh cuba menggunakan: v-for="results in APIData.results", kerana "hasil" bukan pengakses tetapi nama yang anda tetapkan kepada setiap nilai dalam tatasusunan, dan APIData bukan tatasusunan.

Answer 2

Jika anda hanya mahu mengulangiAPIData中的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>