v-modelってActiveRecordのようなもの？と思ってたけどなんか違うみたい。

今後の投稿では、RUNTEQのカリキュラム内容に言及することは控えさせていただきます。

さて、エラーに詰まった時は圧倒的インプットに逃げてしまうことスバルです。

今日もアウトプットドリブンなインプットをしていきたいと思います。

今回はv-modelについて。頻出するメソッドなので、頭の整理をするために色々な参考文献を読み漁っていきます。

v-modelって何?

v-model is a two-way binding for form inputs. It combines v-bind, which brings a js value into the markup, and v-on:input to update the js value.

v-bindとv-onをまとめて書くことのできるシュガーシンタックスで、双方向バインディングという機能を持っている。

stackoverflowによると、v-modelは下記特徴を持つとのこと。

v-bindとv-onをまとめている
v-bindで値を表示し、v-onで値をアップデートする

例えば、searchTextをv-modelとして持つ下記のフォームの書き方は、

<input v-model="searchText">

下記の書き方と同じ挙動をする。

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

順を追って内容の確認をしていく。

1. 双方向バインディングとは

v-modelと波括弧で囲まれた部分が結束されること。

入力した値がすぐに画面に表示されること？

例えば下記のようなコードがあるとする。

<div id="app-1">
    # 双方向バインディングの例 
    <input type="text" v-model="two-way-nan">
    <p>「{{ two-way-nan }}」です。</p>
    
    <!-- プログラム上で変数を書き換えると、↑のフォームの値も変わる -->
    <input type="button" value="fugaに置き換え" @click="textsample = 'fuga'" style="margin-top:50px"></button>
</div>

two-way-nanをv-modelに持つフォームを作成している。

このフォームに入力した内容は、v-modelの値と{{}}で囲まれた部分が双方向にバインディングし合っているため、pタグで囲まれたtwo-way-nanも動的に変更されることになる。

2. v-bindって何

単一方向の値を保持する。ただdataに保存されている値を画面上に出したい時に使う。不変の値。

v-bind:value="searchText"
#これだと、searchTextという不変の文字をviewに表示するだけになる。

3. v-onって何

イベントハンドリングを行うメソッド。@で省略することができる。

v-on:input="searchText = $event.target.value"
#先程の不変だったsearchTextを、inputイベントで変更することができるようにしている。つまり、searchTextが記入した文字に変換されるように定義している。

特徴

@hoge=の後にメソッド名を書くことで、イベントハンドリングを設計することができる。クリックイベントを使う機会が多いため、@click="hoge"という記述を結構見る。

<div id="app">
      <button @click="countUp">Count</button>
      <p>{{ n }}</p>
    </div>

@click =countUpでcountUpメソッドを作成している。

 data():{
				n: 0,
		},
methods: {
        countUp: function() {
            this.n += 1
        }
    }

メソッドにcountUpメソッドの詳細を設定する。

そうすることで、Countボタンをクリックした時の挙動を作ることができる。

今回は、「countUpが発火した時、dataにあるnへthis.nでアクセスし、1プラスする」という記述がなされている。

【Vue.js】v-onの書き方まとめ【初心者向け】 - Qiita

Event Handling - Vue.js

.syncやasync/awaitを学習したときと同じ気持ち。「めっちゃ省略するやん！！」

Vue.js-Difference between v-model and v-bind

ほとんど.syncと同じ挙動をするみたいです。

v-model 一つのpropを双方向バインディングが可能
sync 複数のpropでも双方向バインディングが可能

高度な使い方

vuexとv-modelの相性がいい。

下記のように書くと、直接stateを変更させることができる。

v-modelはobj.messageと設定してある。

<input v-model="obj.message">

算出プロパティにstateを、そしてmethodsにmessageをアップデートさせる記述をかく。


// ...
computed: {
  ...mapState({
    message: state => state.obj.message
# mapStateを使ってstateからmessageを呼び出している。
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
#updateMessageメソッドを定義している。第二引数をupdateMessageに渡してmutationにコミットする流れ。
  }
}