【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ロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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プロパティの初期値を配列にしておくことで、複数選択を許容する場合にもしっかりと双方向バインディングを実現することができます。

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

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

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

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

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

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

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