<p>Saya cuba memaparkan pengguna daripada senarai pengguna daripada Django API pada aplikasi VUEjs saya. </p> <p>Data senarai pengguna dalam API saya: </p> <pre class="brush:php;toolbar:false;">{ "kira": 1, "seterusnya": null, "sebelumnya": null, "hasil": [ { "url": "http://localhost:8000/v1/users/1/", "nama pengguna": "admin", "e-mel": "admin@example.com", "kumpulan": [] } ] }</pre> <p>Kod VUE saya:</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>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? </p> <p>Saya baru menggunakan VUEjs, boleh sesiapa bantu? </p>

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>