[Vue] 엔터키 입력 처리에 대해 알아보자. ( v-on:keyup.enter )

 

보통 Vue에서 클릭했을 때 클릭이벤트로 v-on:click( 이하 @click )을 많이 쓰는데...

검색을 할때는 바로 엔터를 치는 경우가 많다. 검색어를 입력하고, 마우스로 검색버튼을 누르는 일은 많이 없지 않은가

 

그럴 때 사용하는게 v-on:keyup.enter 라는 녀석이다.

 

 

기본문법

      

      

      

    
    

      <javascript />
    
v-on:keyup.enter="호출함수()"

@keyup.enter="호출함수()"

 

 

 

예제

      

      

      

    
    

      <javascript />
    
export default{
	template : `
        <header>
            <input class="form-control me-2" type="text" @keyup.enter="search()"  placeholder="Search" aria-label="Search" v-model="keyWord">
            <button class="btn btn-outline-success" @click="search()">Search</button>
        </header>
	`,
    data () {
        return {
            keyWord : ''
        }
    },
    methods : {
        search () {
            alert("검색..");
        }
    }
}

 

예를 들어 이렇게 하면, 클릭했을 때도, 엔터를 눌렀을 때도 저 search라는 함수가 호출 되는 것을 볼 수 있다~