[Vue.js] @keyup.enter : 엔터 키를 눌렀을 때 코드 실행하기

 

@keyup.enter를 활용하면 jQuery로 구현할 때보다 더 간단하고 직관적이게 코드를 작성할 수 있다.

 

 

#  jQuery로 구현한 코드

<input type="text" id="inputBox">

<script>
    $(document).ready(function(){
        $("#inputBox").on("keyup", function(e){
            if (e.keyCode == 13) { // enter 키의 keyCode는 13
                // 실행할 코드
            }
        });
    });
</script>

 

#  Vue.js로 구현한 코드

<input type="text" @keyup.enter="searchBrand">

<script>
    ...
    const searchBrand = () => {
        // 실행할 코드
    }
    ...

    return { searchBrand };
</script>