[ Vue.js ] v-on, @ click 이벤트로 여러 개의 메서드 실행하기, 다중 메서드 실행 하는 방법

 

Vue.js 에서 클릭 이벤트 (click event) 로 한 개의 이벤트가 아닌 여러 개의 이벤트를 주고 싶을 때 사용할 수 있다.
=> 당연히 method 실행도 가능하다.

 

버튼을 누르면 2개의 알림창( alert() )이 출력되도록 하겠다.

button이미지

<template>
    <main>
        <button type="button" @click="event1(), event2()">다중이벤트버튼</button>
    </main>
</template>
<script>
export default {
    name: '',
    components: {},
    methods: {
        event1() {
            alert('event1')
        },
        event2() {
            alert('event2')
        }
    }
}
</script>

콤마로 구분해놓으면 첫번째 실행이 끝난 후 실행이 된다.