-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
서버에서 데이타는 가져오는데 바인딩이 안 됩니다.
22.01.14 16:38 작성 조회수 104
0
서버에서 데이타를 조회가 되는데,
바인딩된 테이블의 리스트가 변경이 안 되네요
왜 그럴까요?
<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>
답변을 작성해보세요.
0
0
개발자의 품격
지식공유자2022.01.17
콘솔에 어떻게 출력이 되고 있나요?
코드 상으로는 전혀 문제가 없어 보입니다.
혹시 서버에서 받아온 데이터의 포맷이 문제가 있는 콘솔 내용을 봐야 할것 같습니다.
jnj45
질문자2022.01.19
const searchList = await this.$callApi('https://ca2cf65a-ebd5-4efc-a0c4-55baeaf6d52c.mock.pstmn.io/userList','get', params);
console.log('searchList===========================');
console.log(searchList);
this.userList = searchList;
console.log('userList=============================');
console.log(this.userList);
로그결과
로그는 위와 같습니다. 로그로 봐서는 데이타에 문제가 없는 것 같은데요.
로그에 찍힌 데이타를 직접 하드코딩해서 this.userList에 set하면 테이블 목록에 반영이 됩니다.
답변 2