・Vue.jsでセレクトボックスを動的に使う方法は？
こんな疑問にお答えします。
フォーム部分で「v-model」を用いて動的に変えたい場合がありますよね。
今回は自分用のメモとして「セレクトボックス」の動的に使う方法をまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsでセレクトボックスを動的に使う」について解説していきます！
Vue.jsでセレクトボックスを動的に使う【単体】
Vue.jsでセレクトボックスを動的に使う【複数】
【解説】Vue.jsのv-modelの使い方【サンプルコードあり】 目次
【解説】Vue.jsでセレクトボックスを動的に使う【単体】
セレクトボックスを単体で表示するの型は文字列なので、初期値は空文字にします。
下記みたいに↓
const app = Vue.createApp({
data: () => ({
selectItem: ''
})
}).mount('#app')実際に単体セレクトボックスをv-modelで動的に使ったサンプルを作ってみました。
See the Pen vue セレクトボックス① by jito-coder (@jito-coder) on CodePen.
セレクトボックスの値を変えると、下部分にその値が出力されますよね。
<div id="app">
<!-- selectタグ -->
<select v-model="selectItem">
<option disabled value="">選択してください</option>
<option value="りんご">りんご</option>
<option value="オレンジ">オレンジ</option>
<option value="もも">もも</option>
</select>
<!-- 出力用 -->
<p>値は：{{ selectItem }}</p>
</div>const app = Vue.createApp({
data: () => ({
selectItem: ''
})
}).mount('#app')「v-model」を使って「selectItem」を双方向データバインディングします。
そしてpタグ内にマスタッシュ構文にて「selectItem」をいれて紐づけしました。
【解説】Vue.jsでセレクトボックスを動的に使う【複数】
チセレクトボックスを複数使うときの型は「配列」です。
下記のように↓
const app = Vue.createApp({
data: () => ({
selectItem: []
})
}).mount('#app')実際に複数セレクトボックスをv-modelで動的に変えるサンプルを作ってみました。
See the Pen vue セレクトボックス② by jito-coder (@jito-coder) on CodePen.
シフトキーをクリックしながら選択すると、複数選択できるよ。
<div id="app">
<!-- selectタグ -->
<select v-model="selectItem" multiple>
<option value="りんご">りんご</option>
<option value="オレンジ">オレンジ</option>
<option value="もも">もも</option>
</select>
<!-- 出力用 -->
<p>値は：{{ selectItem }}</p>
</div>const app = Vue.createApp({
data: () => ({
selectItem: []
})
}).mount('#app')selectタグに対して「multiple」を記述すれば、複数選択が可能になります。
あとは先述した配列にすれば実装可能です。
【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】：まとめ
- 単体の型は「文字列」なので初期値は空文字にする
- 複数の型は「配列」なので初期値は空配列にする
※selectタグにmultipleを記述
Vue.jsでセレクトボックスを使う時はためしてみてね！
【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】 
【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】 
【解説】Vue.jsでテキストエリアをバインディングする方法