Vue.jsサンプルコード(05)複数のinputに同じ変数を割り当てる

05. 複数のinputに同じ変数を割り当てるとどうなる?

これも双方向データバインディングのサンプルコードです。今回はBootstrapのCSSとJSもCDNから追加して見た目を向上させています。

サンプル

  • Vue.jsバージョン: 2.5.2

動作

HTMLソースで、以下のようにv-model='a'属性をさまざまなinputに追加することで同じ変数aを共用しています。以下はサンプルコードのHTMLを読みやすく省略・整形したものです。

        <input type='text' v-model='a'>

        <label><input type='radio' v-model='a' value='1'>壱</label>
        <label><input type='radio' v-model='a' value='2'>弐</label>
        <label><input type='radio' v-model='a' value='3'>参</label>

        <input type='range' min='1' max='3' v-model='a'>

        <input type='checkbox' false-value='1' true-value='2' v-model='a'>

        <textarea v-model='a'></textarea>

        {{a}}

JSのコードはnew Vueした後でaに初期値を代入しているだけです。

  const vm = new Vue({el: "#app", data: {a: null}})
  vm.a = 1

たったこれだけで、各input(赤)のどの値を変更しても他のすべての値が連動して自動更新されます(青は表示専用になっています)。
しかも、onchangeなどのフックを書く必要がありません。

さらに、ブラウザのコンソールでvm.aの値をvm.a = 2などと変更した場合も、画面のinputの表示が同様に変更されます。

Vue.jsの双方向データバインディングのありがたみがよくわかります。

ヒント: インスタンス変数名の慣習

公式マニュアルによると、Vue のインスタンス変数には vm (ViewModel の略) を使うのが慣例になっています。Vue.jsを書くときはこれに合わせるのがよいでしょう。

Vue のデザインは、MVVM パターンと厳密には関連が無いものの、部分的には影響を受けています。慣例として、 vm (ViewModel の略) を Vue インスタンスの変数名としてよく使います。
https://jp.vuejs.org/v2/guide/instance.htmlより


関連記事

バックナンバー(Vue.jsサンプルコード)

Vue.jsサンプルコード(01〜03)Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833

コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。
これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。
かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。
実は最近Go言語が好き。
仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ