vue target 사용

Vue.js에서 이벤트 핸들러 내에서 이벤트의 target을 사용하는 방법은 다음과 같습니다.

html
<template>
  <div>
    <input type="text" @input="handleInput">
  </div>
</template>

<script>
export default {
  methods: {
    handleInput(event) {
      // 이벤트의 target을 사용하여 입력한 값에 접근
      const inputText = event.target.value;
      console.log(inputText);
    }
  }
};
</script>

위의 예시에서는 <input> 요소에서 발생하는 input 이벤트를 처리하기 위해 handleInput 메서드를 사용합니다. @input은 input 이벤트를 수신하여 해당 이벤트가 발생할 때 handleInput 메서드가 호출되도록 연결하는 Vue.js의 이벤트 리스너입니다.

handleInput 메서드의 인자로 event 객체가 전달됩니다. 이벤트 핸들러 내에서 event.target을 사용하여 이벤트가 발생한 요소에 접근할 수 있습니다. 예시에서는 입력 필드(<input>)의 값을 가져오기 위해 event.target.value를 사용하여 입력한 텍스트 값을 inputText 변수에 저장하고 console.log()를 통해 출력합니다.

event.target은 이벤트가 발생한 요소에 대한 참조를 제공하므로, 해당 요소의 속성이나 값을 가져올 수 있습니다. 이를 활용하여 필요한 작업을 수행할 수 있습니다.