vue.js 엔터 이벤트

Vue.js에서 엔터(Enter) 키를 눌렀을 때 이벤트를 실행하려면 @keyup.enter 이벤트 리스너를 사용할 수 있습니다. 아래의 예제 코드는 엔터 키를 누를 때 handleEnter 메서드를 호출하는 방법을 보여줍니다.

vue
<template>
  <div>
    <!-- 입력란(input) 요소 -->
    <input
      type="text"
      v-model="inputText"
      @keyup.enter="handleEnter" <!-- 엔터 키 이벤트 리스너 -->
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '', // 입력값을 저장하는 데이터 속성
    };
  },
  methods: {
    // 엔터 키 이벤트 핸들러
    handleEnter() {
      // 입력값을 사용하여 원하는 작업을 수행합니다.
      console.log('Enter 키가 눌렸습니다. 입력값: ' + this.inputText);
    },
  },
};
</script>

위의 코드에서는 @keyup.enter 이벤트 리스너를 사용하여 입력란(input)에서 엔터 키가 눌렸을 때 handleEnter 메서드가 호출됩니다. handleEnter 메서드 내에서는 입력값을 사용하여 원하는 작업을 수행할 수 있습니다.

이렇게 엔터 키를 감지하여 원하는 동작을 실행할 수 있습니다.