Vue.js で プルダウンメニューの作り方 (基礎編)

プルダウンとは?

検索バーとしてよく使用されるプルダウンメニューバー。
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する値まで取得するケースが多いです。
そちらの記事はまた後ほど追加で書きます。