[Vue3] change, key 이벤트 (v-on:change, v-on:key)

v-on:change

v-key

 

---

 

1. v-on:change

 

보통 사용자가 select에서 옵션 바꿀 때마다 change 이벤트가 발생한다.

<script setup lang="ts">
import {ref} from "vue";

const selectedValue =ref('');

function changeSelect() {
    alert(selectedValue.value);
}


</script>

<template>
    <select v-model="selectedValue" @change="changeSelect">
        <option value="서울">서울</option>
        <option value="부산">부산</option>
        <option value="제주">제주</option>
    </select>
    <h2>{{selectedValue}}</h2>
</template>

 

주의할 것

selectedValue 변수를 함수 안에서 선언하면 안된다.

ref 변수로 먼저 선언한 뒤 함수를 정의해야 한다.

 

---

2. v-on:key

 

사용자가 키보드 자판을 입력할 때 발생하는 이벤트

 

Vue 컴포넌트에서는 @keyup.enter 만으로 엔터키 입력을 감지할 수 있다. 

.enter	.up
.tab	.down
.delete (Delete 또는 Backspace키)	.left
.esc	.right
.space	.alt.enter (두 개 이상)

 

<input @keyup.enter="enterEvent"/>