【Vue.js】v-modelでselectタグを管理してみましょう

今回の記事は、

  • これからVue.jsを始めてみたい
  • v-modelの使い方が知りたい
  • selectタグでv-modelを使ってみたい

という方に向けた記事になっています。

なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

Vue.jsロゴ

フリーランス案件を探すならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社Hajimari
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約28,000件 約3,300件 約4,200件
平均単価 68.2万円 72.2万円
最高月収 145万円 200万円 176万円
支払いサイト 15日(月末締め翌月15日支払い) 20日
手数料(中間マージン) 非公開 非公開
※実質20%
非公開
特徴高単価な案件が多い
福利厚生サービスが受けられる
・首都圏の案件が中心
給与保証制度で安定した収入を得られる
・税務処理のサポートあり
・マージン率は実質20%
週2/週3の案件が多い
在宅/リモート案件が多い
・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例 ・株式会社Gunosy
・株式会社バンダイナムコホールディングス
・株式会社ユーザベース
・Sansan株式会社
・株式会社一休
・株式会社FiNC Technologies など
・クックパッド株式会社
・株式会社カオナビ
・株式会社Kaizen Platform など
説明記事
公式サイト


転職を考えているならこのエージェント!

運営会社 レバテック株式会社 株式会社Branding Engineer 株式会社リブセンス
対応エリア 東京・神奈川・埼玉・千葉
大阪・兵庫・京都・愛知・福岡
東京・神奈川・埼玉・千葉
大阪・兵庫・京都・奈良・和歌山・滋賀
東京・神奈川・埼玉・千葉
茨城・大阪・兵庫・福岡
案件数 約13,000件 約800件
※非公開求人が多い

※ドラフト制のため、対象外
年齢層 20代:◎
30代:〇
40代:〇
20代:〇
30代:〇
40代:△
20代:〇
30代:〇
40代:〇
特徴エンジニア・デザイナーを専門としている
・カウンセリングに時間をかける
年収アップ率60%の実績
IT/Web/ゲーム業界専門の転職エージェント
・業界経験者がキャリアコンサルタントを務める
・丁寧なカウンセリングで入社後の離職率1%以下を実現
ドラフト制による採用を叶える特殊なサービス
スキル・経験重視で評価してもらえる
・他エンジニアの入札結果を見ることで
自分の市場価値が分かる
紹介企業例 ・サイボウズ株式会社
・株式会社サイバーエージェント
・Chatwork株式会社 など
・DMM.com
・Money Forward
・SmartHR など
・メルカリ
・ZOZOテクノロジーズ
・freee など
説明記事
公式サイト


v-modelディレクティブとは?

まず初めに、v-modelディレクティブの概要についておさらいしておきましょう。

v-modelディレクティブは、主にformのinput / textarea などの要素に使用され、View側(HTML)とModel側(Vue.js)との間でデータの双方向バインディングを実現する仕組みでしたね。

このv-modelディレクティブを使用することで、フォームの入力値を簡単に管理することができ、これまでの素のJavascriptやjQueryでのやり方と比べて開発効率を格段にあげることができます

基本的な使い方や実際の具体例については以下の記事にて詳しく解説していますので、ぜひこちらもご覧くださいね。

おすすめ記事

今回の記事は、 これからVue.jsを始めてみたいv-modelの使い方が知りたい双方向バインディングを使ってみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事[…]

プログラミングイメージ

それでは早速、selectタグに対してv-modelディレクティブを使用する方法を見ていきましょう。

【Vue.js】selectタグ(単体選択)でv-modelを使用する方法

selectタグの中でも、値を一つだけ選択する場合には、基本的には通常通りの使い方とは変わらずselectタグに対してv-modelディレクティブを設定してあげるだけで大丈夫です。

実装コード

<div id="app1">
  <select v-model="selectedLanguage">
    <option disabled value="" >値を選択してください</option>
    <option>Ruby</option>
    <option>Javascript</option>
    <option>PHP</option>
  </select>
   
  <p v-show="selectedLanguage>現在選択されているのは {{ selectedLanguage }} です。</p>
</div>

<script>
let app1 =  new Vue ({
  el: "#app1",
  data: {
    selectedLanguage: ""
  }
})
</script>

動作確認用

現在選択されているのは {{ selectedLanguage }} です。

上記の通り、通常のinputタグに対して使用するのと同じ形で双方向バインディングが実現できているのがご確認いただけたかと思います。

【Vue.js】selectタグ(複数選択)でv-modelを使用する方法

単体選択の場合と比べて、複数の値を選択できる場合には少しだけ注意が必要です。

それは、チェックボックスの場合と同様に、「値を格納したいdataプロパティの初期値を配列にしておく」ということです。

実装コード

<div id="app2">
  <select v-model="selectedLanguages" multiple>
    <option>Ruby</option>
    <option>Javascript</option>
    <option>PHP</option>
  </select>
   
  <p v-show="selectedLanguages.length>現在選択されているのは {{ selectedLanguages.join(", ") }} です。</p>
</div>

<script>
let app2 =  new Vue ({
  el: "#app2",
  data: {
    selectedLanguages: []
  }
})
</script>

動作確認用

現在選択されているのは {{ selectedLanguages.join(", ") }} です。

上記のように、dataプロパティの初期値を配列にしておくことで、複数選択を許容する場合にもしっかりと双方向バインディングを実現することができます。

些細な違いではありますが、不意に詰まってしまいポイントでもありますので、この点はぜひ覚えておいてくださいね。

最後に

さて、ここまでselectタグでv-modelを使用する方法についてご紹介してきましたがいかがでしたか?

複数選択の場合のみ、格納先のdataプロパティを配列にしておく」という点だけ注意しておけば通常の使い方と変わりはありません。

このv-modelディレクティブは、Vue.jsでWebアプリを作成する際に避けて通れない道と言っても過言ではないため、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。