[Vue.js] 한글 바인딩 시 v-model 대신에 v-on:input 사용

https://kr.vuejs.org/v2/guide/forms.html

폼 입력 바인딩 — Vue.js

v-model과 v-on

 

v-model

input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있다.

연결을 해두면 자동으로 업데이트 된다.

message인풋에 값을 입력하면 밑에 변수에 바로 바인딩 되어 나온다. 

<input v-model="message" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

 

 

 

v-on :

dom 이벤트가 트리거될 때 js를 실행할 수 있는 이벤트 리스너다.

v-on을 줄여서 @로 작성한다.

 

 

이벤트의 종류

 

• click : 마우스로 클릭했을 때 실행되는 이벤트
• dblclick: 마우스로 더블클릭했을 때 실행되는 이벤트
• mouseover : 마우스포인트가 해당요소에 올라왔을 때 실행되는 이벤트
• mouseout : 마우스포인트가 해당요소를 벗어났을 때 실행되는 이벤트
• mousemove : 마우스포인트가 이동했을 때(움직일때) 실행되는 이벤트 
• mousedown : 마우스가 버튼을 눌렀을 때 실행되는 이벤트
• mouseup : 마우스가 버튼을 놓았을 때 실행되는 이벤트
• keyup : 키보드 키를 놓았을 때 실행되는 이벤트
• keydown : 키보드 키를 눌렀을 때 실행되는 이벤트
• keypress : 키보드 키를 눌렀다가 놓았을 때 실행되는 이벤트
• change : 요소가 변경될 때 실행되는 이벤트
• submit : form 태그에서 제출될 때 실행되는 이벤트
• reset : form 태그에서 리셋할 때 실행되는 이벤트
• select : select 태그의 값이 선택되었을 때 실행되는 이벤트
• focus : 태그에 포커스되어 있을 때 실행되는 이벤트
• blur : 태그가 포커스를 잃었을 때 실행되는 이벤트 

---

그러나 영어는 v-model로 바로 바인딩이 되는데 한글이나 중국어 일본어는 바로 반영이 안되고 한글자씩 밀리는 현상이 발생한다.

여기서 input 이벤트를 대신 사용하라고 되어있다.

<template>
    <input type="text" :value="name" @input="changeName">
    <p>message : {{name}}</p>
</template>
<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const name = ref('');

    const changeName = (e) => {
      name.value = e.target.value;
    };
    return {
      name,
      changeName
    };
  }
});
</script>