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

Question

서버에서 데이타를 조회가 되는데, 바인딩된 테이블의 리스트가 변경이 안 되네요 왜 그럴까요? < template > < div > < div > < select v-model =" city " > < option v-for ="( city , i ) in cities " : value =" city . code " : key =" i " > {{ city . name }} < input type = "text" v-model =" userName " @ keyup . enter =" searchUserList " > < button @ click =" searchUserList " > 조회 < div > < table > < thead > < th > 이름 < th > 나이 < th > 직업 < tbody > < tr v-for ="( user , i ) in userList " : key =" i " > < td > {{ user . name }} < td > {{ user . age }} < td > {{ user . job }} < 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 ; } } } < style scoped >

개발자의 품격 · Answer

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

개발자의 품격 · Answer

콘솔에 어떻게 출력이 되고 있나요? 코드 상으로는 전혀 문제가 없어 보입니다. 혹시 서버에서 받아온 데이터의 포맷이 문제가 있는 콘솔 내용을 봐야 할것 같습니다.