써먹는 웹개발

[Vue.js] TextBox에서 Enter 키를 눌렀을때 조회 버튼 클릭과 동일한 동작이 실행되도록 처리하는 방법 본문

Study/Vue.js

[Vue.js] TextBox에서 Enter 키를 눌렀을때 조회 버튼 클릭과 동일한 동작이 실행되도록 처리하는 방법

kmhan 2020. 9. 29. 22:05


728x90
반응형

Enter키를 눌렀을때 버튼 클릭과 동일한 동작이 실행되도록 처리하는 방법입니다.

<!DOCTYPE html>
...
<body>
   <div id="app>
      <button v-on:click="logText">조회</button>
      <input type="text" v-on:keyup.enter="logText">
   </div>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
        new Vue({
               el: '#app',
               methods: {
                   logText: function() {
                          console.log('clicked');
                   }
               }
        })
   </script>
</body>
</html>
설명 : 조회버튼에 클릭이벤트에서 logText 메서드를 호출하도록 했는데, TextBox에서 엔터키 이벤트도 logText 메서드를 호출하도록 함으로써 원하는 동작이 가능하다.

 

 

출처 : Vue.js 시작하기 - Age of Vue.js

728x90
반응형
저작자표시

'Study > Vue.js' 카테고리의 다른 글

[Vue.js] Vue (싱글 파일 컴포넌트) 기본 코드 생성방법  (0) 2020.10.04
[Vue.js] Vue-Cli 설치중에 에러날때 해결방법  (0) 2020.10.04
[Vue.js] id를 가변하는 방법  (0) 2020.09.28
[Vue.js] "Cannot resolve module 'vuex' in" 해결방법  (0) 2020.07.18
[Vue.js] 네이밍 케이스 종류  (0) 2020.07.01
'Study/Vue.js' Related Articles more


Comments