[Vue.js] v-model로 한글입력값 binding 시 타이밍 맞추기

 

v-model로 값을 바인딩하고 실시간으로 validation을 체크하여 글자수와 관련된 warning 문구를 띄워주고 싶었다.

이 때, 문제가 생기는데 영어는 상관없지만 한글 입력값의 경우 커서를 옮기거나 다른 곳을 클릭해야 최종 입력값이 바인딩되는 점이다.

 

제대로 바인딩하기 위해서 아래와 같은 방법을 사용한다.

 

<input v-model="username" @input="typing" type="text" />

// 스크립트 영역의 methods에 작성
typing(e) {
  this.username = e.target.value;
}

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.