vue.js로 REST GET하면 결과물이 제대로 담아지지 않습니다.

Question

장고 rest framework가 백엔드고 vue.js로 프론트엔드를 만들어보고 있습니다. 다음과 같은 rest get 요청을 직접 보내면 결과를 잘 받아옵니다. http://localhost:8000/api/custcompany[ { "id": 1, "custcompany_name": "테스트01", "address": "테스트주소01" }, { "id": 2, "custcompany_name": "테스트02", "address": "테스트주소02" }, { "id": 3, "custcompany_name": "테스트05", "address": "테스트주소05" }]vue.js에서 다음과 같이 코드를 보내면

Customer Company::List

New Entry

#No	Name	Address
{{datas.id}}	{{datas.custcompany_name}}	{{datas.address}}

웹브라우져 개발자 툴에서는 다음과 같이 결과를 가져오긴하는데 랩핑되어있어서 정작 필요한 값을 직접 가져오진 못하네요. Object { data: (3) […], status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest } config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … } data: Array(3) [ {…}, {…}, {…} ] 0: Object { id: Getter & Setter, custcompany_name: Getter & Setter, address: Getter & Setter, … } __ob__: Object { value: {…}, dep: {…}, vmCount: 0 } address: "테스트주소01" custcompany_name: "테스트01" id: 1 : function get() : function set(t) : function get() : function set(t) : function get() : function set(t) : Object { … } 1: Object { id: Getter & Setter, custcompany_name: Getter & Setter, address: Getter & Setter, … } __ob__: Object { value: {…}, dep: {…}, vmCount: 0 } dep: Object { id: 10, subs: (1) […] } value: Object { id: Getter & Setter, custcompany_name: Getter & Setter, address: Getter & Setter, … } __ob__: Object { value: {…}, dep: {…}, vmCount: 0 } address: "테스트주소02" custcompany_name: "테스트02" id: 2그래서 웹페이지에서는 다음과 같이 공란으로 나오는데 이런 경우에는 코드를 어떻게 고쳐야할까요?

인성 절구로 빻음 · Accepted Answer

datas는 array아닌가요...?datas.id하면 당연히 값이 안나오지요 테이블에 tr도 없네요tr에 v-for해서 가지고 오셔야지요

kkssy · Answer

짧은 식견으로 말씀드리자면, 먼저 axios는 비동기처리입니다. 즉, 코드가 실행되어도 그 결과값이 되돌아 오는 것은 나중이란 얘기죠.. 프로미스 객체로 돌아옵니다.async await등으로 비동기처리(비동기호출을 동기로 만들어주는 처리)를 해보세요. 성공하면 움직이는 코드 남겨주시고요~

엉터리기획자 · Answer

두분 답변 감사합니다. 그냥 코드 복붙 수준이다보니 그런 기본적인것도 모르고 이걸 하고 있네요 ㅋㅋㅋㅋ

vue.js로 REST GET하면 결과물이 제대로 담아지지 않습니다.

3개의 답변

Q&A 목록