홈페이지 유튜브

IME issue

VueJS IME 입력 문제

한글처럼 IME 입력이 필요한 언어들은 조합이 완성되어야 v-model이 갱신되므로 이용 시 문제가 되는 경우들이 존재한다.

테스트 예제

유니코드 입력이 정상적으로 이루어지지 않는 상황을 확인하기 위해 예제를 준비한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        input {
            font-size: 20px;
            padding: 0.75em;
            display: block;
            margin:0.5em 0;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="text">

        <div>{{text}}</div>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : ""
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

테스트 예제를 실행하면 한글 등 유니코드가 실시간으로 입력되지 않는다는 것을 알 수 있다. 이에 대한 공식 사이트의 해결책은 다음과 같다.

문제점 해결

문제를 해결하려면 키보드 이벤트를 추가해야 한다. input 이벤트를 사용하면 쉽게 처리가 가능하다. 아직 이벤트를 다루지 않았으나 이 부분은 응용이 필요없는 고정 해결책이기에 이곳에서 기술한다.

<input type="text" v-model="text" v-on:input="text = $event.target.value">

$event는 Vue에서 제공하는 내장 이벤트 객체이며, $event.target은 이벤트가 발생한 대상인 input 태그를 말한다. 따라서 $event.target.value는 입력창의 입력값을 불러오는 코드이며, 이를 Vue data인 text에 설정하는 코드를 입력 시 실행되도록 설정했다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model example</title>
    <style>
        input {
            font-size: 20px;
            padding: 0.75em;
            display: block;
            margin:0.5em 0;
        }
    </style>
</head>
<body>
    <div id="app">
        
        <input type="text" v-model="text" v-on:input="text = $event.target.value">

        <div>{{text}}</div>

    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    text : ""
                };
            }
        });
        app.mount("#app");
    </script>
</body>
</html>

한글을 포함한 모든 입력이 정상적으로 수행되는 것을 확인할 수 있다.

PreviousdataNextv-model

Last updated