이전 포스팅에서 Create 기능을 구현하였지만 새로고침을 하지 않을 경우 추가된 데이터를 조회할 수 없는 상태이다.
실제로 서비스하는 환경이라면 무조건 고쳐야할 사항이므로 수정해보겠다.
App.vue
// App.vue의 mounted 부분
mounted() {
// DOM 객체 생성 후 DRF 서버에서 데이터를 가져와 userList에 저장
axios({
method: "GET",
url: url
})
.then(response => {
this.userList = response.data;
console.log("Success", response);
})
.catch(error => {
console.log("Failed to get userList", error.response);
});
},
App.vue 파일의 mounted 부분을 살펴보면 그 이유를 알 수 있다.
Mounted 는 최초 DOM 이 생성될때만 수행된다. 따라서 새로고침을 하지 않는 경우에는 위 로직이 실행되지 않아 추가된 데이터를 볼 수 없는 것이다.
Content.vue
// Content.vue의 methods 부분
methods: {
sendForm: function() {
axios({
method: "POST",
url: url,
data: this.data,
})
.then((response) => {
this.userList = response.data;
// 성공시 GET을 하는 코드를 추가해야함
this.$emit('saved')
})
.catch((error) => {
console.log("Failed to get userList", error.response);
});
},
clearForm: function() {
(this.data.username = ""), (this.data.age = ""), (this.data.city = "");
},
},
또한, Content.vue 파일에서도 sendForm함수에서 이를 처리해주는 부분이 존재하지 않았다. 따라서 위의 코드처럼 emit 을 활용하여
이벤트를 실행하도록 만든다.
App.vue
// App.vue 수정
<template>
<div>
<header></header>
// 수정하는 부분
<content v-bind:propsdata="userList" v-on:saved="getUserList"></content>
<!-- v-bind:하위컴포넌트 속성명="상위 컴포넌트 전달할 데이터명" -->
<footer></footer>
</div>
</template>
methods: {
// 수정하는 부분
getUserList: function() {
axios({
method: "GET",
url: url
})
.then(response => {
this.userList = response.data;
console.log("Success", response);
})
.catch(error => {
console.log("Failed to get userList", error.response);
});
},
},
다시 App.vue로 이동해서 v-on을 활용하여 content.vue에서 전달한 saved 이벤트를 받는다.
그 후에 전에 생성해 두었던 getUserList 함수에서 get 요청을 하는 부분을 구현해준다. (mounted 에서 구현한 것과 비슷함)
해당 코드를 전부 수정하고나면 데이터를 Create 할때 바로바로 리스트가 갱신되는 것을 확인할 수 있다.
Read, Create에 대한 기능을 만들었으므로 다음포스팅에서는 Delete 기능을 구현해볼 것이다.
728x90
'SW개발 > Django' 카테고리의 다른 글
[Django, Vue]Django + Vue CRUD 구현 5 - Front end (0) | 2021.03.05 |
---|---|
[Django, Vue]Django + Vue CRUD 구현 4 - Front end (2) | 2021.03.05 |
[Django, Vue]Django + Vue CRUD 구현 2 - Front end (0) | 2021.03.03 |
[Django, Vue]Django + Vue CRUD 구현 1 - Front end (0) | 2021.03.02 |
[Django, Vue]Django + Vue 연동하기 3 - Front end (0) | 2021.03.02 |