[Vue] Vue.js에서 Enter 키로 버튼 클릭 방지하기

이번 글에서는 Vue.js를 사용하여 Enter 키를 눌러서 버튼이 클릭되는 것을 방지하는 방법에 대해 알아보겠습니다. 웹 애플리케이션에서 사용자가 입력한 정보를 제출하기 위해 Enter 키를 누를 때, 버튼이 의도치 않게 클릭되는 것을 방지하는 방법에 대해 살펴보겠습니다.

<div class="flex justify-between flex-row">
  <div>
    <button @click="exeVote('up')" @keydown.enter.prevent @keyup.enter.prevent :type="`up`" :count="displayedUpVoteCnt"/>
  </div>
  <div>
    <button @click="exeVote('down')" @keydown.enter.prevent @keyup.enter.prevent :type="`down`" :count="displayedDownVoteCnt"/>
  </div>
  <div>
    <button :type="`reply`" :count="rc"/>
  </div>
</div>

 

위의 코드에서는 Vue.js에서 Enter 키를 눌러서 버튼이 클릭되는 것을 방지하는 방법을 보여줍니다. 각 버튼에 @keydown.enter.prevent 이벤트 수식어를 추가하여 Enter 키를 누를 때 발생하는 키다운 이벤트를 처리하고, @keyup.enter.prevent 이벤트 수식어를 추가하여 Enter 키를 누를 때 발생하는 키업 이벤트를 처리합니다. 이렇게 함으로써 Enter 키를 눌러도 exeVote 함수가 실행되지 않습니다.