[Vue.js][문제해결] @click 이벤트에서 함수 호출 시 () 유무로 인한 문제

[그림 1] @click="openModal" 코드에서 ()가 없어 발생한 에러

 

openModal()이라는 모달 창을 정의하고 생성, 수정 버튼에서 함께 이용하고자 하였다. 이 모달 창은 id가 undefined인 경우에는 생성 버튼, id가 존재하는 경우에는 수정 버튼으로 작동한다. 그런데 생성 버튼 클릭 시 [그림 1]과 같은 에러가 발생하였다.

// 생성, 수정 버튼에서 이 모달창을 사용하도록 하였다.
openModal(id) {
  // id가 undefined인 경우에는 생성 버튼
  if (id === undefined) {
    this.selectedItem = {
      product_category_id: -1,
      category_name: '',
      category_description: ''
    }
  // id가 존재하는 경우에는 수정 버튼
  } else {
    this.selectedItem = JSON.parse(
      JSON.stringify(
        this.list.filter((item) => item.product_category_id === id)[0]
      )
    )
  }
},

 

console.log(id)를 찍어 보니 undefined가 출력되지 않았다. 아래 코드에서 @click="openModal"에 ()가 붙지 않아서 라는 것을 알게 되었다. @click="openModal()"로 수정 후 정상적으로 undefined가 출력되었고 에러가 사라졌다.

<button
  class="btn btn-success me-1"
  data-bs-toggle="modal"
  data-bs-target="#categoryModal"
  @click="openModal"
>
  생성
</button>