엉터리기획자
56
2022-05-22 00:45:50
3
154

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


장고 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에서 다음과 같이 코드를 보내면

<body>
    <div class="container w-75 mx-auto mt-5">
        <H2>Customer Company::List</H2>
        <HR>
        <a href="" class="btn btn-info">New Entry</a>
        <P>

        <div id="app">
            <table class="table table-hover table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th>#No</th>
                        <th>Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>

                    <td><a href="">{{datas.id}}</a></td>
                    <td>{{datas.custcompany_name}}</td>
                    <td>{{datas.address}}</td>

                </tbody>
            </table>
        </div>
    </div>

    <script>
        var ex = new Vue({
            el: '#app',
            data: {
                datas: []
            },
            computed: {
                hasResult: function () {
                    return this.posts.length > 0
                }
            },
            created: function () {
                const baseURI = 'http://localhost:8000/api/custcompany';
                axios.get(`${baseURI}`)
                    .then((result) => {
                        console.log(result)
                        this.datas = result.data
                    }
                    )
            }
        });
    </script>
</body>

웹브라우져 개발자 툴에서는 다음과 같이 결과를 가져오긴하는데 랩핑되어있어서 정작 필요한 값을 직접 가져오진 못하네요.

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
​​​
<get address()>: function get()​​​
<set address()>: function set(t)​​​
<get custcompany_name()>: function get()​​​
<set custcompany_name()>: function set(t)​​​
<get id()>: function get()​​​
<set id()>: function set(t)​​​
<prototype>: 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

그래서 웹페이지에서는 다음과 같이 공란으로 나오는데 이런 경우에는 코드를 어떻게 고쳐야할까요?


0
  • 답변 3

  • kkssy
    267
    2022-05-22 00:58:43

    짧은 식견으로 말씀드리자면, 

    먼저 axios는 비동기처리입니다. 즉, 코드가 실행되어도 그 결과값이 되돌아 오는 것은 
    나중이란 얘기죠..  프로미스 객체로 돌아옵니다.

    async await등으로 비동기처리(비동기호출을 동기로 만들어주는 처리)를 해보세요. 

    성공하면 움직이는 코드 남겨주시고요~

  • 인성 절구로 빻음
    2k
    2022-05-22 12:48:26 작성 2022-05-22 12:49:27 수정됨

    datas는 array아닌가요...?

    datas.id하면 당연히 값이 안나오지요


    테이블에 tr도 없네요

    tr에 v-for해서 가지고 오셔야지요

  • 엉터리기획자
    56
    2022-05-23 00:42:53
    두분 답변 감사합니다. 그냥 코드 복붙 수준이다보니 그런 기본적인것도 모르고 이걸 하고 있네요 ㅋㅋㅋㅋ 
  • 로그인을 하시면 답변을 등록할 수 있습니다.