[VueJS] input 바인딩 시 한글/일어/중국어 업데이트 문제 처리 (ft. v-on:input)

vueJS에서 input 바인딩을 사용할 때 한글/일어/중국어 사용 시 업데이트 문제 처리에 대해 알아보자.

 

v-model을 통한 양방향 바인딩을 사용할 때 문제가 생기는데,

위에서 설명한 한글/일어/중국어의 경우 바로바로 업데이트가 안되는 상황이 발생한다.

 

이는 vueJS 공식 사이트에서도 해당 내용을 다루고 있다.

[IME](https://en.wikipedia.org/wiki/Input_method) (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 `v-model`이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 `input` 이벤트를 대신 사용하십시오.

 

코드를 통해 다시한번 접해보자.

---

▷ 예제1) v-model 문제

new Vue({
  el: '#app',
  data: {
    message: ''
  },
});

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

 

▷ 결과

이런식으로 "한국어" 라고 입력을 했는데 바인딩 되는 부분은 "한국"만 바인딩 된다.

 

해결 방법은 공식 사이트에서 안내해준것처럼 @input을 사용해 변경하는것이다.

 

▷ v-on:input 사용

<input @input="message = $event.target.value" placeholder="여기를 수정해보세요">
<p>메시지: {{ message }}</p>

 

이런식으로 사용하게 되면 입력과 동시에 바로바로 바인딩 되는것을 확인할 수 있다.

 

그래도 input 태그에서 v-model을 사용할 때 입력과 동시에 바로 바인딩이 필요한 부분이 아니면 그냥 사용해도 좋다.

무슨 소리냐면 예를들어 검색어를 입력하고 검색을 하는 기능을 만든다면 이는 입력 후 [엔터] 나 [클릭]을 동반할텐데 이럴때는 그 행위로인해 바인딩이 되니까 이런 경우에는 그냥 v-model로도 충분하다.

---

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

폼 입력 바인딩 — Vue.js