人生裏ローテ

通年裏ローテを守って地味に重宝がられる人生を送りたいITエンジニアのブログ

Vue.jsのv-modelとIMEの小話

Vue.js プログラミング

tl;dr

v-model だと入力途中のものが反映されないので面倒だけどキーイベントに応じて document.getElementById("some").value しよう

補足

主にオートコンプリートでの話だが、オートコンプリート機能自体をAPI化している場合など、キーイベントで何かしらのメソッドを発火させたい場合がある。

しかし、Vue.jsで便利な v-model はIME起動時にデータを変更しないようになっている。(入力が確定された時にデータが入る)

試してみてほしい。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <title>Sample</title>
    </head>
    <body>
        <h1>IME Sample</h1>
        <div id="vue-sample">
            <input type="text" v-model="message">
            <p>{{ message }}</p>

            <hr>

            <input type="text" v-on:keyPress="withIme" id="with-ime">
            <p>{{ with_ime }}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var vm = new Vue({
                el: "#vue-sample",
                data: {
                    message: "",
                    with_ime: ""
                },
                methods: {
                    withIme() {
                        message = document.getElementById("with-ime").value
                        this.with_ime = message
                    }
                }
            })
        </script>
    </body>
</html>