【Vue】v-modelが使えないとき

こんにちは。

フロントエンドエンジニアのザトです。

双方向バインディングで名をはせるv-model。

公式ドキュメントに沿うと

  <input v-model="searchText">

v-modelは糖衣構文で上記は内部的には以下のコードと同じことをしています。

  <input 
     v-bind:value="searchText"
     v-on:input="searchText = $event.target.value"
   >

inputイベントが発生したときに変数searchTextに、入力された値を格納しているだけです 。（テキストと複数行テキストの場合です。チェックボックスやラジオボタンはchangeイベント。）

ただ、inputイベントが発生したときにsearchText = $event.target.value以外の他の処理を実行したいという場面がいずれやってきます。

そういうときはv-modelを使わずにバラして書かざるえません。

    <input
        v-bind:value="searchText"
        v-on:input="hoge"
    >

    ・・・省略

    export default {
        methods: {
            hoge: function (e) {
                this.searchText = e.target.value
                 // 他の処理
               }

    ・・・省略

最初からv-model使わないほうが柔軟に対応できるかなーとも思いましたが、v-modelには便利な装飾子（v-model.trimやv-mode.number）があるので、結局使い分けたほうが良さそうです。

実務では一筋縄ではいかないので糖衣構文を使うときは内部の処理を理解しておくことが大事です。