서버에서 데이타는 가져오는데 바인딩이 안 됩니다.

Question

서버에서 데이타를 조회가 되는데,

바인딩된 테이블의 리스트가 변경이 안 되네요

왜 그럴까요?

<template>
    <div>
        <div>
            <select v-model="city">
                <option v-for="(city, i) in cities" :value="city.code" :key="i">{{city.name}}</option>                
            </select>
            <input type="text" v-model="userName" @keyup.enter="searchUserList">
            <button @click="searchUserList">조회</button>
        </div>
        <div>
            <table>
                <thead>
                    <th>이름</th>
                    <th>나이</th>
                    <th>직업</th>
                </thead>
                <tbody>
                    <tr v-for="(user, i) in userList" :key="i">
                        <td>{{user.name}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.job}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>
<script>
import axios from 'axios';

export default {
    name: '',
    components: {},
    data() {
        return {
            cities: [{code:'02',name:'서울'},{code:'051',name:'부산'},{code:'064',name:'제주'}],
            city: '02',
            userName: '',
            userList: []
        }
    },
    setup() {},
    created() {},
    mounted() {},
    unmounted() {},
    methods: {
        async searchUserList() {
            const params = {
                selectedCity: this.selectedCity,
                userName: this.userName
            }
            console.log(params);

            this.userList = await this.api('https://ca2cf65a-ebd5-4efc-a0c4-55baeaf6d52c.mock.pstmn.io/userList','get', params);
            // this.userList = [
            //     {name:'유재석2', age: 50, job:'연예인'},
            //     {name:'하하2', age: 45, job:'연예인'},
            //     {name:'김종국2', age: 48, job:'연예인,가수'}
            // ];
            console.log(this.userList);
        },
        async api(url, method, data) {
            return (
                await axios({
                    method: method,
                    url: url,
                    data: data
                }).catch(e => {
                    console.log(e);
                })
            ).data;
        }
    }
}
</script>
<style scoped>
</style>

vuejs vuex

개발자의 품격 · Answer

현재로써는 코드상에는 전혀 문제가 없기 때문에 정상적으로 수행되어야 하는게 맞는데 참 이상하네요.

개발자의 품격 · Answer

콘솔에 어떻게 출력이 되고 있나요?

코드 상으로는 전혀 문제가 없어 보입니다.

혹시 서버에서 받아온 데이터의 포맷이 문제가 있는 콘솔 내용을 봐야 할것 같습니다.

인프런 커뮤니티 질문&답변

서버에서 데이타는 가져오는데 바인딩이 안 됩니다.