onClick 이벤트 겹침 발생 해결 (Form Error)

문제

Vue2를 사용해 프로젝트를 하던 중
API 통신을 위해 버튼을 이용해 click 이벤트를 발생시키려 했는데
클릭이 두 번 되거나 페이지가 새로고침 되는 등의 문제가 발생했다.

원인

<form>
      <!-- 로그인 정보 입력칸 생략 -->
  <div class="flex justify-center p-2 mt-10">
    <button @click:'submitForm' :disabled="btnDisabled" >
      Log In
    </button>
  </div>
</form>

• script code

submitForm: function(){
	loginUser(this.form)
}

• 여러 개의 API 통신을 시도하면서 필요에 따라 form 객체 안에 데이터를 담아 보내는 방식을 사용했는데
  form 태그의 @submit 이벤트를 삭제하면 form 태그가 영향을 끼치지 않고 버튼에서 onClick 이벤트를 실행할 수 있을거라고 생각했다.
• 하지만 form 태그 하위에 있는 button 태그에서 onclick 함수를 실행시키려고 하니 제대로 작동되지 않았다.

해결

• HTML code

<form @submit.prevent="submitForm">
      <!-- 로그인 정보 입력칸 생략 -->
  <div class="flex justify-center p-2 mt-10">
    <button type="submit" :disabled="btnDisabled" >
      Log In
    </button>
  </div>
</form>

• script code

submitForm: function(){
	loginUser(this.form)
}

• form 태그를 사용할 때에는 Button 태그의 타입을 'submit'으로 설정해두고 form 태그에서 submitForm 함수를 호출해야한다..
• form 태그를 사용하면서 submit 이벤트를 사용하지 않고 button을 이용해 onclick 이벤트를 실행 시키려면 form 태그의 외부에 button 태그를 선언해야한다

너무 기초적인 문제였지만 이것 때문에 1시간을 날렸어서 정리하는 글..