change 이벤트 시 해당 타겟 가지고 오는 방법

Vue.js에서 @change 이벤트를 처리할 때 해당 이벤트가 발생한 요소(타겟)을 가져오기 위해서는 이벤트 핸들러 함수의 매개변수로 전달된 event 객체를 활용하면 됩니다. 이 event 객체에는 발생한 이벤트와 관련된 다양한 정보가 포함되어 있습니다.

아래는 @change 이벤트 핸들러 내에서 이벤트가 발생한 타겟 요소를 가져오는 예시입니다:

vue
<template>
  <div>
    <select @change="handleChange">
      <option value="option1">옵션 1</option>
      <option value="option2">옵션 2</option>
      <!-- 추가 옵션들 -->
    </select>
  </div>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      // 이벤트가 발생한 요소(타겟) 가져오기
      const targetElement = event.target;
      
      // 타겟의 값 가져오기
      const selectedValue = targetElement.value;

      console.log('선택된 값:', selectedValue);
    }
  }
};
</script>

위의 코드에서 @change 이벤트 핸들러 내부의 event 객체를 이용하여 이벤트가 발생한 요소(타겟)을 가져오고, targetElement.value를 통해 선택된 값도 가져올 수 있습니다. 이를 활용하여 원하는 처리를 할 수 있습니다.