[Vue 에러] form submit방지 및 router 오류

Vue와 스프링부트를 연동해서 게시판을 만들고 있는데, router해주는 과정에서 문제가 발생했다. 심지어, axios 통신을 하는데 게시글은 정상적으로 저장되는데 반면 springboot에서 동작 이후 then으로 넘어오지 못하는 현상이 있었다.

 

이부분은 아직 작업중이지만, 같은 선상의 문제라고 생각한다. -> 문제 해결 이후 정상동작한다.

 

코드는 아래와 같다.

 

<template>
    <div>
        <page-title :heading=heading :subheading=subheading :icon=icon></page-title>
        <div class="row">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="card-body"><h5 class="card-title">글 작성</h5>
<!--                        <form v-on:submit.prevent class="">-->
                        <form class="">
                            <div class="position-relative form-group"><label for="title"
                                                                             class="">글 제목</label><input name="title"
                                                                                                          id="title"
                                                                                                          placeholder="제목을 입력해주세요."
                                                                                                          class="form-control" v-model="notice.title">
                            </div>
                            <div class="position-relative form-group"><label for="content" class="">글 내용</label><textarea name="content" id="content" class="form-control" v-model="notice.contents"></textarea>
                            </div>
                            <div class="position-relative form-group"><label for="exampleFile"
                                                                             class="">File</label><input name="file"
                                                                                                         id="exampleFile"
                                                                                                         type="file"
                                                                                                         class="form-control-file">
                            </div>
                            <button @click="save" style="margin-right:10px" class="mt-1 btn btn-primary">저장</button>
                            <button @click="$router.go(-1)" class="mt-1 btn btn-primary">닫기</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
    data() {
        return {
            notice : {
                noticeId : '',
                title : '',
                contents : ''
            },
        }
    },
    methods: {
        save : function(){
            this.$axios.post('/api/notices/save', this.notice)
            .then(() => {
                alert("abc")
                console.log("뭐야 이거 ")
                this.$router.push('/board/vweb_board_mgmt')
            })
            .catch((ex)=>{
                console.error("failed write article", ex)
            })
        }
    },
}
</script>

 

문제

위와 같은 상황에서 "닫기"버튼을 누를 경우 $router.back() 이 동작하여 이전 페이지로 돌아가도록 코드를 작성했다.

하지만 결과는 아래와 같다.

 

그림 상에는 boardnotice?title=%content=%file=과 같이 파라미터가 담긴 주소로 리다이렉트된 것을 확인할 수 있다.

하지만 이 페이지로 넘어오기 직전에 다른페이지로 깜빡이면서 넘어가는게 계속 보여서 두번 리다이렉트되나? 하고 고민에 빠졌다.

코드는 단순해보였고, axios관련 문법 post 방식, router 선언부터 적용까지 크게 어려운 부분은 아니였기 때문에 더 에러를 찾기 어려웠다.

 

답답한 마음에 다른 사람 "글 작성 페이지 " 코드 template을 그대로 가져와서 내 코드를 대입하고 실행했더니, 정상적으로 동작했다.

그래서 코드를 하나씩 지워보기로 했다.... -> 원시적인 방법이지만, 이 방법 덕분에,,,, 해결했었던...

문제의 원인은 다른것이 아니라 form태그! 

 

문제 원인 - Vue form 태그!

<form> 안에 <button>이 있기 때문에 클릭할 경우 form 의 submit이 동작하기 때문에 발생한 원인이였다.

그래서 axios의 response를 받기 전에 페이지가 이동해버리니 then으로 정보도 가져올 수가 없었던 것..!!

form에 action 또한 없기 때문에 현재 페이지가 리로딩되는 것이라고 한다. 

 

 

해결 방법

javascript에서는

click event로 form이 submit되는 것을 방지!

 

function saveClick(e){
    e.preventDefault()
    // do something
}

Vue에서는

<button class="btn" @click.self.prevent="doSearch">
 
<form v-on:submit.prevent>

위와 같이 button에 click 동적 함수를 넣어줄 때 .self.prevent와 함께 넣어주거나,

form 태그에 v-on:submit.prevent를 넣어주면 submit되는 것을 방지하여 정상적으로 버튼 내의 함수가 동작할 수 있다.

 

 

간단한 문제에 어떻게 보면 꽤나 긴 글을 적은 것 같다. 글을 퍼와서 기억하는 것도 중요하지만, 적어가면서 내가 부족한 부분, 체크해서 기억해야되는 부분을 더 세심하게 느낄 수 있는 것 같다.

 

앞으론 더 열심히 적어야지.. 적겠습니다. 화이팅!

 

출처 : https://hello-bryan.tistory.com/266

[Vue] 삽질주의 #1 @click 사용 시