[Vuejs] input 내 v-model이 UTF-8이나 한글을 제대로 인식하지 못하는 경우

Vuejs를 사용하다 보면 input 태그 안에 사용한 v-model이 제대로 한글 인식이 되지 않는 문제가 있다. 이 경우는 영문자는 한글자가 바로 인식되는 음절이지만 한글은 최소 두 개의 자음과 모음이 만나야 음절로 만들어지기 때문에 커서가 움직이지 않는 한 글자로 인식하지 않는 문제가 있다. (IE 11에서 발견됨. Chrome에서는 해당사항 없음.)

이럴 경우 input 내 blur 이벤트에 바인딩 하여 처리하는 방법이 있다. 이는 focus가 변경되는 것에 이벤트를 걸어 처리하는 방법이다.

template 부분

<input type="text" class="form-control" v-model="estLogcDscr" @blur="fixEstLogcDscr" />

script 내 vuejs정의 부분

1. methods: {
2.     fixEstLogcDscr: function (e) {
3.         this.estLogcDscr = e.target.value;
4.     }
5. }