プルダウンとは?
検索バーとしてよく使用されるプルダウンメニューバー。
Webサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。
完成コード
HTML
<select v-model="selectedFruits">
<option disabled value="">果物一覧</option>
<option v-for="fruit in optionFruits"
v-bind:value="fruit.name"
v-bind:key="fruit.id">
{{ Fruit.name }}
</option>
</select>
Vue.js
export default {
data() {
return {
selectedFruits: '',
optionFruits: [
{ id: 1, name: 'りんご' },
{ id: 2, name: 'みかん' },
{ id: 3, name: 'ぶどう' }
],
}
}
}
手順① dataを関数に
export default {
data() {
return {
}
}
コンポーネントのdataオプションは関数でなければいけないため、return 以下に初期設定したいdataプロパティの内容を記述します。
手順② dataの値を設定
selectedFruits: '',
optionFruits: [
{ id: 1, name: 'りんご' },
{ id: 2, name: 'みかん' },
{ id: 3, name: 'ぶどう' }
],
selectedFruitsプロパティにはからの文字列（""）で指定します。
そしてプルダウン指定値を配列 [] で用意し、その中に複数の**{}オブジェクト**を用意します。
手順③ HTMLで表示する
<select v-model="selectedFruits">
<option disabled value="">担当</option>
<option v-for="fruit in optionFruits"
v-bind:value="fruit.name"
v-bind:key="fruit.id">
{{ Fruit.name }}
</option>
</select>
selectタグにデータバインディングを作成するためのv-modelを指定します。
そしてその値の中に先ほど用意した、selectedFruitsプロパティにはからの**文字列（""）**をあてます。
<select v-model="selectedFruits"></select>
次にoptionタグはfor文で値を回し、それを一つ一つ選択できるように設定します。
その際、先ほど**配列 []**で用意したoptionFruitsをあてます。
<option v-for="fruit in optionFruits"
v-bind:value="fruit.name"
v-bind:key="fruit.id">
{{ Fruit.name }}
</option>
key, valueは実際にフォームとして送信したいケースに合わせて値を変更してください。
実際使用するケースとしては、
バックエンド側と連携するプルダウンを作成するために、axiosを使用し、
apiを叩いてselectする値まで取得するケースが多いです。
そちらの記事はまた後ほど追加で書きます。