Vue 클릭이벤트(click event) 여러개 설정하는 방법 (How to call multiple functions with @click in vue)

Vue 클릭이벤트(click event) 여러개 설정하는 방법

vue 템플릿에서 @click을 사용할 때 여러 개의 이벤트를 같이 사용하는 방법은 아래와 같습니다.

<template>
  <div>
    <button @click="[method1(), method2()]">클릭 버튼</button>
  </div>
</template>

<script>
export default {
  methods: {
    method1() {
      console.log("method1");
    },
    method2() {
      console.log("method2");
    }
  }
};
</script>

사용 예제

아래는 위 코드를 동작시킨 예시입니다. 버튼을 클릭했을 때 2개의 함수가 동시에 정상적으로 실행된 것을 확인할 수 있습니다.

복수의 클릭이벤트를 실행시키는 예시

2개 이상 클릭 이벤트를 연결했을 때도 잘 동작합니다.

2개 이상의 클릭이벤트를 연결했을 경우에도 잘 동작하는 예시