Vue js에서 @click과 @change를 사용할 때 주의점

view단 작업을 하던도중 radio버튼을 클릭했을 때 값이 변경된 후 다음로직이 수행되는 부분을 구현해야 했는데,

처음에는 @click(v-on:click)이벤트를 이용해서 작업하다보니 내 생각과는 다르게 작동했다.

 

의도했던것은 @click가 눌렸을 때 해당 태그의 값이 변경되고, function이 실행될 것 같았는데, 막상 실행해보니 click이벤트가 발생한 뒤 값이 변경되었는데, 이 부분을 코드로 보면 다음과 같다.

<div id="view-point">
    // <input type="radio" name="radio" v-model="val" @click="func"> 값이 변경된 후 함수가 실행되게 하고싶으면 @change를 사용...
    <input type="radio" name="radio" v-model="val" @change="func">
</div>
 
 
//스크립트 최대한 간략화함...
<script>
    let vm = new Vue({
        el : '#view-point',
        data : {
            val : null,
        }
        methods : {
            init : function() {
                //생략
            },
            func : function() {
                // val값을 변경해주고, 
                // 이후 프로세스를 실행시키는 함수
            }        
        },    
        mounted: function(){                    
            this.$nextTick(function () {
                this.init();
            })
        }
    });
</script>

위와 같이 작성해서 실행했을 때 click이벤트가 발생하면 func함수는 v-model의 val값이 바뀌기 전에 실행되어버려 의도된대로 실행되지 않았다. 따라서 @click 부분을 @change로 바꿔서 실행해보니 의도된대로 잘 실행되었고,

 

이게 무슨차이가 있는지 궁금해서 찾아보니 stack overflow에 설명되있기로는 @change는 값이 변하는걸 감지한 이후에 실행되고 @click은 바로 함수가 실행된다는 것이였는데, 글을 읽고 곰곰히 생각해보니 단어 뜻을 생각해보면 당연히 change는 변화감지, click은 클릭감지인데 당연한걸 모르고 사용했다는게 좀 바보같다는 생각이 들었다.

다음부터는 잘 생각해서 사용해야겠다는 생각이 들었다.