【Vue.js】【小ネタ】フォームの入力値を入力直後ではなくEnterやボタンクリックで反映させる | Wood-Roots:blog

2020
04/23

【小ネタ】フォームの入力値を入力直後ではなくEnterやボタンクリックで反映させる

世界中で大変なことになってしまいさすがに私でも不安を感じることが多くなってきましたが、平常心の維持を心がけてやっていこうと思います。

というわけで、Vue.jsの小ネタをご紹介します。

ADs

いつもv-modelでバインドすればいいというものではない（と思う）

input[type=”text”]にv-modelでデータをバインディングした場合、ユーザーが文字を入力するごとに対象データが書き換わります。

1
2
3
4
5
6
7
8
9
10
<input type="text" v-model="data1">
 
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                data1: '' //入力値はdata1に反映される
            }
        })
    </script>

これはこれで一つのユーザーエクスペリエンスですが、例えば入力内容が検索文字列となる場合、入力途中から検索が実行されてしまい人によってはうっとおしく感じる動きをしてしまいます（それはそれでインクリメンタルサーチという一つのユーザーエクスペリエンスではありますが）。

検索語句が確定する前から検索を実行するのはサーバーへの負荷も大きくなりますし、事前に検索対象データを保持したとしても日本語圏ではあまり使い勝手のよい動作とは思えません。

そこでv-modelを使わずフォームにデータをバインディングし、Enterやボタンクリックで入力値を反映させる方法です。

デモ

Enterかボタンのクリックでデータを確定させる

まずフォーム要素にはv-modelではなく、v-bindでデータをバインディングします。
そしてv-on:keyup.enterでデータを反映する関数を定義します。ボタンにも同じ関数をv-on:clickで関連付けます。
（つまりフォーム内でEnterを押すのとボタンをクリックするのは同じ処理が実行されます）

inputには入力値を関数側で取れるように、rel属性を追加します。

1
2
<input type="text" v-bind="data2" ref="input" v-on:keyup.enter="submitText">
<button v-on:click="submitText">クリックすると反映します</button>

rel属性を付けた要素は「this.$refs.HTML側の名前」とすることでその要素を取得することができます。
getElementByIdのようなものです。

Javascript側はとてもシンプルで、Enterのとき＆ボタンクリックのときにdataに代入する処理を書くだけです。

1
2
3
4
5
6
7
8
9
10
11
var app = new Vue({
    el: '#app',
    data: {
        data2: ''
    },
    methods: {
        submitText() {
            this.data2 = this.$refs.input.value;
        }
    }
})

実践的にはdata2をwatchで監視して検索処理に送るとか、submitTextをデータ代入以外に処理を加えるなどの方法で使うことになると思います。

ADs

Related Articles関連記事

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。

Category

Archive

Search

Social