Vue.js에서 중첩 키의 JSON 객체를 찾는 방법

Question

<p>VUEjs 애플리케이션에서 Django API의 사용자 목록에 있는 사용자를 표시하려고 합니다. </p> <p>내 API의 사용자 목록 데이터:</p> <pre class="brush:php;toolbar:false;">{ "개수": 1, "다음": null, "이전": null, "결과": [ { "url": "http://localhost:8000/v1/users/1/", "사용자 이름": "관리자", "이메일": "admin@example.com", "그룹": [] } ] }</pre> <p>내 VUE 코드:</p> <pre class="brush:php;toolbar:false;"><템플릿> <div>

사용자

<div v-for="APIData의 결과" :result="results" :key="results.username"> <h5>{{ 결과.사용자 이름 }}</h5> <p>{{ 결과.이메일 }}</p> </div> </div> </템플릿> <스크립트> import { getAPI } from '../axios-api'; 'vuex'에서 { mapState }를 가져옵니다. 기본값 내보내기 { 이름: '사용자', 계산됨: mapState(['APIData']), 만들어진() { getAPI.get('/v1/users/', { 헤더: { 승인: 'Bearer ' + this.$store.state.accessToken } }) .then(응답 => { this.$store.state.APIData = 응답.데이터 }) .catch(오류 => { console.log(오류) }) } } <p>어떤 이유에서인지 API 요청이 성공하고 네트워크 탭에 데이터가 표시되지만 웹페이지에는 데이터가 표시되지 않습니다. 사용자가 표시되는 방식이 올바른가요? 아니면 내가 뭔가를 놓치고 있는 걸까? </p> <p>저는 VUEjs를 처음 접하는데 도움을 주실 수 있나요? </p>

Answer 1

문제는 v-for에 있습니다. 다음을 사용해 볼 수 있습니다. v-for="results in APIData.results", "results"는 접근자가 아니라 배열의 각 값에 할당하는 이름이고 APIData는 배열이 아니기 때문입니다.

Answer 2

단순히 반복하고 싶다면APIData中的results:

으아악 으아악