vue js event가 발생한 객체 value값 가져오기

vue js를 이용하여 화면단을 개발하던 도중 keyup 이벤트를 이용하여 필터하는 기능을 구현해야 했는데, 이 기능을 서버단에서 처리할지 클라이언트단에서 처리할지 고민하다가 결국 클라이언트단에서 처리하기로 결정하고(필터되는 부분이 복잡하고 자원이 많이들었다면 서버단에서 처리했을 것 같긴하다.) 코드작성을 시작헀는데, 처음에는 v-model과 v-on:keyup 이벤트를 이용해서 다음과 같이 작성했었다.

 

<%-- html -->
<table id="viewPoint">
    <tr>
        <td>
            <input type="text" v-model="test" @keyup="filter">
        </td>
        <td v-for="item in targetList">{{item}}</td>
    </tr>
</table>
 
 
 
 
<script>
    (function() {
        let vm = new Vue({
            el: '#viewPoint',
            data : {
                targetList : [],
                test : ''
                
            },
            methods : {
                initialize : function() {
                    //초기화로직
                },
                filter : function() {
                    return vm.targetList.filter(a => a === test);
                }
            },
 
            mounted: function () {
                this.initialize();
            },
        });
    }());
</script>
 
 
 
 
 
 

그런데 테스트하다보니 예상했던건 keyup이벤트와 v-model의 test라는 값의 변경이 바로바로 이뤄지지 않는 문제점과 저 test라는 변수는 필터할 대상값 이외에는 사용되지 않기에 조금 컴팩트하게 작성하고 싶어서 검색해본 결과 공식문서에 vue에서 원본 DOM에 접근할 수 있게 해주는 $event라는 특별한 변수가 있어서 그걸 사용하기로 하고 다음과 같이 코드를 변경했다.

<%-- html -->
<table id="viewPoint">
    <tr>
        <td>
            <input type="text" @keyup="filter($event.target.value)">
        </td>
        <td v-for="item in targetList">{{item}}</td>
    </tr>
</table>
 
<script>
    (function() {
        let vm = new Vue({
            el: '#viewPoint',
            data : {
                targetList : [],                
            },
            methods : {
                initialize : function() {
                    //초기화로직
                },
                filter : function(value) {
                    return vm.targetList.filter(a => a === value);
                }
            },
            mounted: function () {
                this.initialize();
            },
        });
    }());
</script>
 

코드만 보면 크게 바뀐건 없다 기존 v-model로 존재하던 test라는 변수가 빠지고 직접 dom의 이벤트가 발생한 곳의 밸류를 필터링하는 함수에 전달한 뒤 필터하는 기능으로 변경된게 끝이다.

 

이렇게 v-model를 이용하던것을 직접 dom의 값을 찾아서 변수로 전달하는것으로 변경했는데, 어떤게 더 좋은지는 잘 모르겠지만 내 기준에서 불필요하게 재사용하지않는 변수를 선언해놓고 쓰기보단 직접 dom에서 값을 받아서 변수로 전달하는게 깔끔하다고 생각된다.