今回の記事は、
- これからVue.jsを始めてみたい
- v-modelの使い方が知りたい
- selectタグでv-modelを使ってみたい
という方に向けた記事になっています。
なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。
今回の記事は、 最近よく聞くけど、Vue.jsってなに？これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質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アプリを作成する際に避けて通れない道と言っても過言ではないため、ぜひこの機会にマスターしておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
