vuejs의 json 개체에서 중첩된 키를 찾는 방법

vuejs의 json 개체에서 중첩된 키를 찾는 방법

나는 나의 Django API에서 얻고 있는 사용자 리스트의 사용자를 내 VUEjs 앱에 표시하려고 한다.

API의 My User 목록 데이터:

{
  "count": 1,
  "next": null,
  "previous": null,
  "results": [
    {
      "url": "http://localhost:8000/v1/users/1/",
      "username": "admin",
      "email": "admin@example.com",
      "groups": []
    }
  ]
}

내 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>

API 요청이 성공한 것을 볼 수 있고 네트워크 탭에서 데이터를 볼 수 있지만 왠지 웹페이지에 데이터가 표시되지 않는다.사용자를 표시하는 방법이 올바른가?아니면 내가 뭘 놓친건가?

나 VUEJ 처음인데, 누가 좀 도와줄래?

반복만 하려면results에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>

문제는 v-for에 있다.v-for="results in APIData.results""결과"는 접근자가 아니므로, 배열 내부의 각 값에 할당하는 이름이며, APIData는 배열이 아니다.

참조URL: https://stackoverflow.com/questions/69166225/how-to-find-nested-key-in-the-json-object-in-vuejs