이벤트 핸들링

event

e.target.textContent 처럼 실행하는 event의 안으로 들어가서 그 내용을 가져올 수 있음

<template>
  <button @click="handler">
    Click me!
  </button>
</template>

<script>
export default {
 methods: {
   handler(e) {
     console.log(e)
     console.log(e.target.textContent)
   }
 }
}
</script>

<style>

</style>

event2

handler에 직접 인자를 추가, $event를 추가해서 동시에 핸들러가 발생하게 할 수 있다. 참고로 $e는 동작하지 않는다.

<template>
  <button @click="handler('hi', $event)">
    Click 1
  </button>
  <button @click="handler('what', $event)">
    Click 2
  </button>
</template>

<script>
export default {
 methods: {
   handler(msg, event) {
     console.log(msg)
     console.log(event)
   }
 }
}
</script>

<style>

</style>

handler

하나의 버튼을 클릭했을 때 두개의 methods를 동시에 실행하는 방법
쉼표로 구분하고 인자로 받는게 없어도 ()를 적어줘야한다. 여러개의 methods를 받는 경우에만!

<template>
  <button @click="handlerA(), handlerB()">
    Click me!
  </button>
</template>

<script>
export default {
  methods: {
    handlerA() {
      console.log('A')
    },
    handlerB() {
      console.log('B')
    }
  }
}
</script>

<style>

</style>