[Django, Vue]Django + Vue CRUD 구현 3 - Front end

이전 포스팅에서 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 할때 바로바로 리스트가 갱신되는 것을 확인할 수 있다.

 

새로고침 없이 Create 정상 작동

 

Read, Create에 대한 기능을 만들었으므로 다음포스팅에서는 Delete 기능을 구현해볼 것이다. 

출처 : https://leffept.tistory.com/293?category=950490