Vue 에서 input 태그에 @click과 @change 사용 시 생긴 이슈

// 커스텀 컴포넌트 형태
<커스텀 컴포넌트 v-model="모델명" @click="클릭 이벤트"/>


// 커스텀 컴포넌트 내부
<template>
	<div>
    	<!--문제 되던 코드-->
    	<input type="radio" v-model="모델명" @click="커스텀 클릭 이벤트"/>
        
        <!--수정 코드 -->
        <input type="radio" v-model="모델명" @change="커스텀 클릭 이벤트"/>
    </div>    
</template>


-- 이하 생략 --

커스텀 클릭 이벤트(evt) {
	this.$emit('click', evt);
}

vue에서 switch 컴포넌트를 만드는 중 커스텀 컴포넌트에 @click 이벤트를 달아야 하는 상황이 생겼습니다.

 

 

 

내부에는 radio 타입의 input 태그가 있고 그곳에 @click 이벤트를 달아서 클릭 시에 이벤트를 올려야지 생각했는데 의도와 다르게 작동하였습니다.

 

의도할 때는 해당 태그의 v-model 값이 변경 되고 함수가 실행 될거라고 생각하였으나 클릭 이벤트가 먼저 발생되었기 때문에 @change 이벤트로 변경하여 실행하였더니 의도된대로 잘 되었습니다.

 

---

정리 해보자면 @click 이벤트는 클릭 시 발생 되는 이벤트고 @change는 값이 변화된 것을 감지하고 실행 되는 이벤트기 때문에 차이가 있는것을 알 수 있었습니다.