Vue.js에서 중첩 키의 JSON 객체를 찾는 방법
<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>
