[Vue.js] v-model 양방향 바인딩 문제 (feat. input event)

v-model 양방향 바인딩

Vue.js의 경우에는 v-model을 통해 양방향 바인딩을 제공한다고 알고 있었다.

Vue.js를 학습하며 토이 프로젝트를 진행 중,
영어의 경우에는 문제없이 입력값이 전부 잘 저장되지만,
한국어의 경우에는 계속 마지막 입력이 잘려 저장되는 문제를 발견하게 되었다.

처음에는 데이터를 상위 컴포넌트에서 관리하고 하위 컴포넌트에서 input을 받아 v-model로 데이터를 상위로 올려주었는데, 이 event를 호출하는 과정에서 문제가 생긴 줄 알고 하나로 합쳐도 봤다가, 로그만 찍어봤다가 해봤는데도 문제가 생겨 골머리를 앓고 있었다😂😂

 

해결 방법

당연히 v-model의 문제라고 생각 안 하고 문제점들을 찾다가, 혹시나 해서 찾아보게 됐는데...

공식 문서에서 다음과 같은 안내를 보게 되었다...!

v-model IME 문제

중국어나 일본어, 한국어 같은 IME 경우에는 문자를 조합 중에는 업데이트가 이뤄지지 않는다는 문제가 발생한다.

그래서 만약 업데이트가 바로바로 진행되길 원한다면 아래와 같이 input event listener를 사용해서 직접 event의 target으로부터 value를 받아와야 한다.

<template>
  <div>
    <input type="text" @input="e => inputValue = e.target.value" />
    <p>inputValue: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    }
  }
}
</script>

이렇게 input으로부터 value를 받아와 inputValue에 추가해 주면 한국어 같은 IME 언어의 조합 중에서도 입력값이 저장되는 것을 확인할 수 있다.

사실 이메일이나 비밀번호 같은 입력값은 v-model을 사용해도 문제가 없겠지만, 

이름이나 닉네임 같은 경우도 많이 입력 받는데, 이러면 v-model을 사용할 수 없기 때문에 사실상 (IME 언어 사용 국가에서는) Vue.js가 v-model을 통해 양방향 데이터 바인딩을 제공한다고 보는 게 맞을지... 모르겠다😂

 

---

 

REF

 

https://vuejs.org/guide/essentials/forms.html#text