v-model IME 버그
v-model 디렉티브를 사용하면 input과 textarea 에 양방향 데이터 바인딩을 사용할 수 있다
<template>
<div class="container">
<input v-model="message">
<p> {{ message }}</p>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
message: '안녕하세요'
}
})
</script>
Plain Text
복사
- Vue.js 공식 홈페이지
IME (중국어, 일본어, 한국어 등)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. 이러한 업데이트를 처리하려면 input 이벤트를 대신 사용하십시오.
- Vue.js github issue
v-model does not working properly with Korean chars (only with IE 11)
Plain Text
복사
이 문제를 해결하기 위해서는 input 이벤트 혹은 @blur 를 사용해서 해결해야한다.
모든 input 태그에 이벤트를 바인딩 해주는건 굉장히 귀찮고 코드도 더러워지기 때문에 custom directive 를 만들어서 사용했다.
<template>
<div id="app">
<input v-typing="message">
<p>{{message}}</p>
</div>
</template>
<script>
Vue.directive('typing', {
bind: function (el, binding, vnode) {
var expression = binding.expression
el.value = vnode.context[expression]
el.addEventListener('input', function (e) {
vnode.context[expression] = e.target.value
})
}
})
new Vue({
el: '#app',
data: {
message: '안녕하세요'
}
})
</script>
Plain Text
복사
라이브러리
직접 플러그인으로 만들어서 배포를 하기 직전에 발견했다고 한다
참고
•
[@input 을 사용한 해결 방법](https://jsfiddle.net/kciter/tLz9gt4o/)
•
[@blur 을 사용한 해결 방법](https://jsfiddle.net/posva/g94vLx3o/)