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

 

문제가 생길 수 있는 소스 코드

<template>
  <form>
    <div class="row">
      <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-append">
          <button class="btn" @click="doSearch">
            <span class="fa fa-search"></span>
          </button>
        </div>
      </div>
    </div>
  </form>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: mapActions([
    'doSearch'
  ])
}
</script>

버튼을 클릭하면 doSearch 라는 action 을 실행하겠죠.

const actions = {
  doSearch({ commit, state }){
    console.log('doSearch');
    axios.get('/api/search/').then(response => {
        console.log(response);
        commit('setResults', response.data)
    }).catch(error => {
      console.log(error)
    })
  }
}

axios를 사용해서 비동기 작업을 합니다.

디버깅을 하기 위해서 아래와 같이 break point 를 찍고 기다리는데,

안걸립니다 ;;

 

문제는 

<form> 안에 <button> 이 있어서 클릭하면 form 의 submit 이 먹힌다는 거죠.

그래서 axios 의 response를 받기 전에 페이지가 이동해버립니다. 

form 에 action 이 없기 때문에 현재 페이지가 리로딩 되는것 이었습니다. (그래서 동작이 없는줄;;)

 

해결

javascript 의 click event 에는 항상 쓰는 것이 있었는데요.

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

preventDefault 입니다. 기본 동작을 하지 않겠다는 거죠.

Vue 에서는

<button class="btn" @click="doSearch">
<button class="btn" @click.self.prevent="doSearch">

아래 라인과 같이 사용하면 해당 button 에 대해 기본 동작을 prevent 할수 있습니다.

또는 form 에 설정할 수 있습니다. (form 에 설정했으면 button 에 @click.self.prevent 로 할 필요없습니다)

<form v-on:submit.prevent>

이러면 form 안에 input 에서 엔터키를 쳐서 form 이 submit 되는것도 막을 수 있습니다.